AngularJS指令无法渲染替换后的DOM。

Question

AngularJS指令无法渲染替换后的DOM。

3

我正在尝试制作一个简单的指令，用另一个绑定到作用域的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似乎有问题：

如果我删除color部分，它就能正常工作。

有什么建议吗？

编辑：如果我直接在模板上使用我想呈现的内容，它就能正常工作。

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

template: '{{category.color}}'

呈现为：

asdads

这个问题不会发生在1.0.1版本中。在1.1.5上出现问题的JSFiddle：

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

- Marcio Cruz

请问您能分享一下 Fiddle 吗？ - Ajay Beniwal

这个 plunk 运行良好。 - rGil

糟糕，没有看到 ng-repeat。 - rGil

Ajay，这是JSFiddle的链接：http://jsfiddle.net/marcio0/a5KLT/。 - Marcio Cruz

这个 Plunkr 使用的是 Ang 1.0.7，我认为它与 1.1+ 有关。 - Marcio Cruz

显示剩余2条评论

2个回答

1

这似乎是Angular 1.1x分支中的错误。我能想到的唯一解决方法是在模板中删除样式，并在链接函数中手动设置监视：

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是一个更好的想法。

- Aleksander Blomskøld

不错的发现。这是更新后的plunk（http://plunker.co/edit/94qcX7GNJoheX9XWuqZS），反映了$watch。 - rGil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gloopy · Accepted Answer

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

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

这里有一个更新的 fiddle，可以始终创建您想要的标记。