Question

我认为这可能是this question的重复，除了我在代码中没有使用原语。我有一个指令，我用它来动态地将内联svgs放入我的视图中。它的工作原理如下：

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块的其他工作部分都在同一范围内，即控制器的范围。但是icon有自己的隔离范围，在这个范围内，link.icon没有任何意义。我怎样才能解决这个限制？还是我完全偏离基地？

Answer 1

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

AngularJS：使用隔离范围对自定义指令进行ng-repeat

1 个答案: