AngularJS：NG-重复了自定义指令与分离范围

不过，我觉得这可能只是我不会在我的代码使用原语是this question重复。我有一个指令，用于将内联svgs动态地放入我的视图中。它的工作原理就像这样：AngularJS：NG-重复了自定义指令与分离范围

app.directive('icon', ['$timeout', function($timeout) { 
    return { 
    restrict: "E", 
    scope: { 
     href:"@", 
     title: "@" 
    }, 
    replace: true, 
    templateUrl: $timeout(function(elm,attrs) { 
     var definition = { 
     add: "add133.svg", 
     alert: "warning30.svg", 
     attachment: "attachment13.svg", 
     call: "auricular6.svg", 
     calendar: "calendar5.svg", 
     notify: "church2.svg", 
     compass: "circular14.svg", 
     cloud: "cloud127.svg", 
     addUser: "create1.svg", 
     delete: "delete30.svg", 
     trash: "delete48.svg", 
     servicedesk: "edit26.svg", 
     email: "email20.svg", 
     star: "favourites7.svg", 
     key: "key162.svg", 
     lock: "lock27.svg", 
     search: "magnifier12.svg", 
     menu: "menu48.svg", 
     print: "printer70.svg", 
     settings: "settings21.svg", 
     share: "share12.svg", 
     customer: "user91.svg" 
     }; 
     return 'svg/' + definition[attrs.name]; 
    },30000) 
    } 
}]);

最后我让我用一个服务来获取从JSON文件定义列表更新代码，但我只是想试探这个现在。这按预期工作。但是当我重复它时，值突然变得不明确。见下面笔者认为：

<div ng-repeat="link in config.mainlinks" ng-class="{true: 'active', false: 'dormant'}[config.urlCheck('{{link.name}}')]" sys-stack="2"> 
    <a href="{{link.href}}" title="{{link.title}}"> 
     <icon name="{{link.icon}}"></icon> 
    </a> 
</div>

正如你可能从我的代码推断，我在我的控制器名为config定义的模型和模型的属性称为mainlinks。 Mainlinks是为了提供工作所需的代码块的属性的对象，它看起来像这样

mainlinks: { 
     dash: { 
      name: "dashbaord", 
      href: "#dashboard", 
      title: "Dashboard", 
      icon: "compass" 
     }

当它呈现的DOM看起来是这样的：

<div ng-repeat="link in config.mainlinks" ng-class="{true: 'active', false: 'dormant'}[config.urlCheck('calendar')]" sys-stack="2" class="ng-scope ng-isolate-scope z2 dormant"> 
    <a href="#calendar" title="Calendar"> 
     <icon name="{{link.icon}}"></icon> 
    </a> 
</div>

但是像这样的作品细

<span ng-repeat="link in config.mainlinks"> 
    {{link.icon}} 
</span>

我的猜测是因为我的测试跨度和我的div块的其他工作部分都在同一范围内，即控制器外壳他们。但图标有其自己的隔离范围，在该范围内，link.icon没有任何意义。我怎样才能解决这个限制？还是我完全脱离基地？

来源

2014-08-29 richbai90

那是因为你attibute值的名字不会被时间templateURL功能势必被调用。您只需按照原样获取文本“{{link.icon}}”即可。SO模板网址返回无效的网址，它无法加载该指令 – PSL 2014-08-29 20:24:23

你可以提供任何建议如何解决它，我更新了我的代码，添加$超时服务希望延迟执行，但它似乎没有任何影响。 – richbai90 2014-08-29 20:39:12

问题是，如果你在可以访问的属性中加载了静态文本，那么你在templateURl中无法真正做到这一点，但在这种情况下，你可能不得不做一些棘手的事情。或者在链接函数中进行替换svg并编译它。 – PSL 2014-08-29 20:41:39

的问题是，你只能做这么多的templateUrl功能，你ATLEAST必须属性静态文本，你可以在模板URL中读取。如果在属性中使用内插值或范围绑定，那么在编译延迟后对templateurl进行评估时，它将不可用。既然你有ng-repeat内的所有东西，你的整个ng-repeat和里面的指令只有在你的指令的templateurl被渲染后才会被编译。因此，一些选项可以替代模板url，只需放置一些模板，并在读取属性值的指令的链接阶段（或后链接阶段）中替换它（因为它当时可用）。或者只是将功能包装到单个指令中，并将mainlinks绑定到它。

事情是这样的： -

标记： -

<icons mainlinks="config.mainlinks"></icons>

指令： -

.directive('icons', [function() { 
    return { 
    restrict: "E", 
    scope: { 
     mainlinks: "=" 
    }, 
    templateUrl:'links.html', 
    replace: true, 
    link:function(scope, elm, attrs){ 
    ..... 

    } 
    } 
});

移动config.urlCheck和definition可移至服务（比如SVG服务），可以被共享（如果这是你经常在你的应用中使用的东西）并将其注入到你的指令中。还要注意的是mainlinks似乎是字典，以便您ng-repeat应该ng-repeat="(k,link) in mainlinks"

Plnkr

来源

2014-08-29 21:24:55 PSL

更新的重击 – PSL 2014-08-29 21:28:42

AngularJS：NG-重复了自定义指令与分离范围

回答

相关问题