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

Question

我正在尝试使用 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>

Answer 1

指令需要更改一些内容才能看到标签数组。

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

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

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

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

scope: {labelsArray: '='},

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