模板中带有 ng-repeat 的 Angular 指令答案

【问题标题】：Angular directive with ng-repeat in template模板中带有 ng-repeat 的 Angular 指令
【发布时间】：2013-08-23 01:26:59
【问题描述】：

我正在尝试使用 Angular 1.2 指令。我的有一个带有 ng-repeat 的模板。指令似乎看不到参数中传递的变量。代码如下：

小提琴：http://jsfiddle.net/supercobra/vmH3v/

控制器：

angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
    $scope.labels=
        [{name:"abc", color:'blue'},
            {name:"xxx", color:'red'}];                   
}])

.directive('prettyTag', function() {
 return {
 restrict: 'E',
 scope: {labelsArray: '@'},
   template: '<h2>Label list:{{labelsArray}}:</h2><div class="label label-warning" ng-repeat="label in labelsArray">{{label.name}}</div>',

restrict: 'E',
};

});

HTML：

<div ng-app="myApp" ng-controller="Ctrl">
  label Array: {{labels}}
  <hr>
  <pretty-tag labelsArray='{{labels}}'></pretty-tag>
  <hr>
</div>

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

需要更改指令才能看到标签数组。

首先，将漂亮标签 HTML 更改为：

<pretty-tag labels-array='labels'></pretty-tag>

请注意，labelsArray 已更改为标签数组（指令和属性名称应遵循此虚线约定），而 {{labels}} 仅更改为标签（以便可以在数组上建立双向绑定）。

接下来，在您的指令中，labelsArray 范围应该是 '='，以便本地范围属性可以引用父范围属性：

scope: {labelsArray: '='},

小提琴： http://jsfiddle.net/Hmcj8/

【讨论】：

医生点了什么。