我正在尝试制作一个简单的指令,用另一个绑定到作用域的2个属性的span替换一个span:
.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代码: 在渲染时,它没有显示颜色,并在控制台上引发以下错误:
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版本中。在1.1.5上出现问题的JSFiddle: