I have been working on creating a straightforward directive that swaps out one span with another, binding to two attributes in the scope:
.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);
}
};
})
Here is my HTML snippet:
<span ex-category="transaction.category"></span>However, when it renders, the color is not displayed and I am seeing this error in the console:
TypeError: Cannot read property 'length' of undefined
at $interpolate (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.js:5318:24)
// More error lines below...
It seems like there is an issue with the generated DOM:
<span class="category-label" style="background-color: {{category.color}};;background-color: {{category.color}};" ex-category="transaction.category">If I remove the color part, it works fine.
Any advice or suggestions on how to fix this problem would be appreciated.
Edit: If I directly render the value I want to display in my template, it works without any issues.
Edit: The problem seems to stem from the style tag:
template: '<span class="category-label" ng-bind="category.name" style="aaa">{{category.color}}</span>'renders as:
<span class="category-label ng-binding" ng-bind="category.name" style="aaa;aaa" ex-category="transaction.category">asdads</span>This problem doesn't occur with version 1.0.1. You can check out the JSFiddle showcasing the issue in version 1.1.5 here: