javascript - AngularJS 指令无法呈现替换的 DOM

Question

我正在尝试制作一个简单的指令，用绑定(bind)到范围的 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 上出现的问题:

http://jsfiddle.net/marcio0/a5KLT/

Answer 1

不要使用 style="background-color: {{category.color}};" 尝试使用 ng-style像这样:

ng-style="{backgroundColor: category.color}"

Here is an updated fiddle这将始终如一地创建您想要的标记。