3

我正在尝试制作一个简单的指令，用另一个跨度绑定到范围的 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/

4

2 回答 2

4

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

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

这是一个更新的小提琴，它将始终如一地创建您想要的标记。

于 2013-06-04T05:49:47.093 回答
1

这看起来像是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 当然是一个更好的主意。

于 2013-06-04T05:48:33.883 回答