属性を介して渡されたメソッドからコンテンツのリストをレンダリングするディレクティブを作成しています。データを取得するメソッドを渡すだけでなく、リストに表示される ul 要素と li 要素にクラスを設定する 2 つの属性を受け取ります。li 要素にクラスを設定すると、正常に動作します。ul にクラスを設定しようとすると、混乱が生じます。ng-repeat が期待どおりに機能しなくなり、「未定義は関数ではありません」という例外がスローされます。
問題のあるディレクティブの簡略版を次に示します。
var myApp = angular.module('myApp',[]).
directive('contentList',function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
method:'&',
ulclass: '@',
liclass: '@'
},
template: '<div class="content-list-wrapper"> ' +
'<div class="content-loader" ng-show="loading"><i>Loading...</i></div>' +
'<ul class="content-list {{ulclass}}">' +
'<li class="content-list-repeat {{liclass}}" ng-repeat="item in items" ng-transclude></li>' +
'</ul>' +
'</div>',
link: function(scope,iElement,iAttrs){
scope.items = scope.method();
}
} ;
});
ul 要素の class 属性で {{ulclass}} を削除すると、すべてが機能します。なぜそれがliでは機能するのにulでは機能しないのか、私は困惑しています。
http://jsfiddle.net/woogychuck/wqU63/でjsfiddleをセットアップしました