4

angular 1.2ディレクティブを試しています。私のものには、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>
4

1 に答える 1

7

ディレクティブがラベル配列を表示するには、いくつか変更する必要があります。

まず、pretty-tag HTML を次のように変更します。

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

labelsArray が labels-array に変更され (ディレクティブと属性名はこの破線の規則に従う必要があります)、{{labels}} が単純に labels に変更されたことに注意してください (配列で双方向バインディングを確立できるようにするため)。

次に、ディレクティブ内で、ローカル スコープ プロパティが親スコープ プロパティを参照できるように、labelsArray スコープを「=」にする必要があります。

scope: {labelsArray: '='},

フィドル: http://jsfiddle.net/Hmcj8/

于 2013-08-23T02:01:07.413 に答える