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

发布时间：2020-12-17 17:31:00 所属栏目：安全来源：网络整理

导读：我正在试验角度1.2指令.我有一个模板w / ng-repeat.在param中传递的变量似乎没有被指令看到.这是代码：小提琴：http://jsfiddle.net/supercobra/vmH3v/ 控制器： angular.module('myApp',[]).controller('Ctrl',['$scope',function($scope) { $scope.labels

我正在试验角度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>

解决方法

有一些事情需要更改指令才能看到标签数组.

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

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

需要注意的是labelsArray改为标签阵列(指令和放大器;属性名应当遵循这个惯例虚线)和{{标签}}简单地变更为标签(这样双向绑定可以在阵列上建立).

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

scope: {labelsArray: '='},

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!