4

AngularJS の初心者の問題についてアドバイスを求めています。

私のアプリには、動作している API が可能なタイプのリストから値を与える多くのケースがあります。その値をモデルに取り込んでから、それを何か (各タイプのアイコンなど) にマップしたいと考えています。これらの一般的なタイプのいくつかのマッピングを頻繁に再利用する可能性が高いので、効率的で再利用できる良い方法は何ですか?

私はそれを「DRY」に保ち、「関心の分離」に固執するようにしています。これにより、表示ロジックはモデルから可能な限り分離されます。

「良い」が主観的であることはわかっていますが、うまくいけば、人々はここでアイデアを得ることができます...

これはかなり一般的なシナリオのように思えますが、いくつかの具体的な例は次のとおりです。

私。ファイルを操作して、ファイルの種類を取得し、その種類に基づいた特定の画像が表示されるようにマップしたいと考えています。ファイルを扱うアプリでは、これは多くの場所で発生する可能性があります。

ii. 天気アプリ - 天気の種類が通知され、特定の天気アイコンを表示したいとします (これもアプリ全体の多くの場所にあります)。

私はAngularJSにかなり慣れていませんが、問題を少し読みましたが、解決できる可能性のある方法がたくさんあることを考えると、どのように進めるのが最善かわかりません-次のいずれかであると推測しています:

を。モデルからの値を配置する式内のさまざまな場所でそれを再利用できるように、独自のフィルターを作成します。

b. 独自のディレクティブを作成します（これについてはあまり明確ではありませんが、私の理解では、特定の目的のためにディレクティブを作成できます。たとえば、「タイプ」を「星」カウンターなどの何かを表し、次のような値を入力したい場合などです3 を指定すると、3 つの星が表示されるなど）

良いサンプルコードを見つけることができる場所に関するアドバイスや推奨事項はありますか?

どうもありがとう、

ニール

4

1 に答える 1

4

アイコン/画像へのモデルはかなり単純な方法で、ファイルのリストがあるとしましょう

$scope.files=[
    {
        name:"file name",
        type:'pdf'
    },
    {
        name:"file name2",
        type:'doc'
    }
]

次に、ドキュメントのリストがあるとしましょう

    {{ファイル名}}

次に、次のようなcssがあります。

.icon-file{
    width:20px;
    height:20px;
    display:inlie-block;
    background-repeat:no-repeat;
    background-position:center center;
}

.icon-file.pdf{
    background-image:url('path/to/pdf.png');
 }

.icon-file.doc{
    background-image:url('path/to/doc.png');
 }

ディレクティブとして、孤立したスコープなし

 angularApp.directive('file',function(){
     return {
           restrict:'AE',
           replace:false,
           template:'<i class="icon-file"></i><span></span>',
           link:function(scope,element,attrs){
                  element.find('li').addClass(attrs.type);
                  element.find('span').text(attrs.name);
            }
      }
 })

独立したスコープを持つディレクティブとして

 angularApp.directive('file',function(){
     return {
           restrict:'AE',
           replace:false,
           scope:{
                type:"@type",
                name:"@name"
            },
           template:'<i class="icon-file {{type}}"></i><span>{{name}}</span>',

      }
 })

ディレクティブの使用

 <file_type name="file_name" type="type"></file_type>
于 2014-05-28T23:57:55.347 に答える