スパンをスコープの2つの属性にバインドする別のスパンに置き換える単純なディレクティブを作成しようとしています:
.directive('exCategory', function () {
return {
restrict: 'A',
scope: {
category: '=exCategory'
},
replace: true,
template: '<span class="category-label" ng-bind="category.name" style="background-color: {{category.color}};"></span>',
link: function (scope, element) {
console.log(scope, element);
}
};
})
これは私のhtmlです:
<span ex-category="transaction.category"></span>
レンダリングすると、色が表示されず、コンソールに次のエラーが発生します。
TypeError: Cannot read property 'length' of undefined
at $interpolate (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:5318:24)
at attrInterpolateLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4987:27)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4774:13)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4365:15)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4368:13)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4368:13)
at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:4270:30)
at ngRepeatAction (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:14945:15)
at Object.$watchCollectionAction [as fn] (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:8476:11)
at Object.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:8570:27) <span class="category-label" style="background-color: {{category.color}};;background-color: {{category.color}};" ex-category="transaction.category">
生成された DOM に問題があるようです:
<span class="category-label" style="background-color: {{category.color}};;background-color: {{category.color}};" ex-category="transaction.category">
color
ビットを外すと動作します。
助言がありますか?
編集:テンプレートで直接レンダリングしたいヒットを使用すると、機能します。
編集:問題はstyle
タグに関連しているようです:
template: '<span class="category-label" ng-bind="category.name" style="aaa">{{category.color}}</span>'
レンダリング:
<span class="category-label ng-binding" ng-bind="category.name" style="aaa;aaa" ex-category="transaction.category">asdads</span>
バージョン 1.0.1 では問題は発生しません。JSFiddle は 1.1.5 で発生する問題を抱えています: