angularjs - "AngularJS way"映射 View 中的输出值

Question

我正在寻求有关 AngularJS 初学者问题的建议:

我的应用程序有很多情况，它使用的 API 从可能类型的列表中给出一个值，我已经将值拉入我的模型，然后我想将它映射到某些东西，例如每种类型的图标。
由于我可能会经常重复使用其中一些常见类型的映射，那么有什么好方法可以高效并允许重复使用呢？

我试图保持“干燥”并坚持“关注点分离”，因此显示逻辑尽可能与模型分离。

我知道“好”是主观的，但希望人们在这里得到这个想法......

在我看来，这是一个相当普遍的场景，但一些切实的例子是:

一世。 处理文件，我得到文件类型，我想映射它，以便显示基于类型的特定图片。在处理文件的应用程序中，这可能会出现在很多地方。

ii. 天气应用程序 - 会被告知天气类型，然后希望显示特定的天气图标(再次在整个应用程序的许多地方)

我对 AngularJS 还是很陌生，但我已经阅读了一些问题，但我不确定如何最好地解决问题的可能方法 - 我猜它可能是:

一种。 制作我自己的过滤器，以便我可以在我放置模型值的表达式中的不同位置重复使用它

湾制定我自己的指令(对此不太清楚，但我的理解是我可以为特定目的制定指令，例如，如果我希望我的“类型”代表诸如“星星”计数器之类的东西并输入一个值，例如3 导致它显示 3 颗星等)

关于在哪里可以找到好的示例代码的任何建议或建议？

非常感谢，

尼尔

Answer 1

模型到图标/图像是相当简单的方式，假设您有一个文件列表

$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>