4

我正在就 AngularJS 的初学者问题寻求建议：

我的应用程序在很多情况下，它所使用的 API 从可能的类型列表中提供了一个值，我已经将该值提取到我的模型中，然后我想将它映射到某些东西，例如每种类型的图标。由于我可能会频繁地重复使用其中一些常见类型的映射，因此有什么好方法可以高效并允许重复使用？

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

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

在我看来，这似乎是一个相当普遍的情况，但一些切实的例子是：

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

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

我对 AngularJS 还很陌生，但我已经阅读了一些关于这个问题的内容，但我不确定如何最好地进行，因为有多种可能的方法可以解决它 - 我猜它可能是：

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

湾。制定我自己的指令（对此不太清楚，但我的理解是我可以为特定目的制定指令，例如，如果我希望我的“类型”代表诸如“星”计数器之类的东西并输入类似的值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 回答