Question

我正在尝试使用angular 1.2指令。我有一个模板w / ng-repeat。在param中传递的变量似乎没有被指令看到。这是代码：

小提琴：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-array（指令和属性名称应遵循此虚线约定），{{labels}}只是更改为标签（以便可以在阵列上建立双向绑定）

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

scope: {labelsArray: '='},

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

在模板中使用ng-repeat的Angular指令

1 个答案: