Question

我正在尝试创建一个简单的指令，用另一个span绑定替换范围的2个属性的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似乎有些问题：

如果我删除color位，则可以正常工作。

有什么建议吗？

编辑：如果我使用我想在我的模板上直接渲染的匹配，它就可以工作。

编辑：问题似乎与style标记有关：

template: '{{category.color}}'

呈现：

asdads

版本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将创建您想要的标记。

Answer 2

这看起来像a bug in the Angular 1.1x-branch。我能想到的唯一解决方法是删除模板中的样式并在链接功能中手动设置手表：

template: '<span class="category-label" ng-bind="category.name"></span>',
link: function (scope, element) {
    scope.$watch('category.color', function() {
        element.attr('style', 'background-color: ' + scope.category.color + ';');
   });

<强>更新

使用ng-style当然是一个更好的主意。

AngularJS指令无法呈现替换的DOM

2 个答案: