AngularJS指令无法呈现更换DOM

我试图做一个简单的指令，取代了跨度与另一跨度结合2个属性范围：AngularJS指令无法呈现更换DOM

.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：

在呈现时，它确实给NIT的颜色，并提出在控制台上出现以下错误：

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/

来源

2013-06-04 Marcio Cruz

可以请您分享小提琴 –

[This plunk]（http://plunker.co/edit/0qToKpyS3vOH3InpqvMn?p=preview）正常工作。 – rGil

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

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

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

Here is an updated fiddle，将创建要始终标记。

来源

2013-06-04 05:49:47 Gloopy

是ng-style是更好的方式去角色 –

风格属性或转义版本'ng-style =“{\'background-color \'：category.color}”' –

'ng-style'做到了，谢谢 –

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

来源

2013-06-04 05:48:33

尼斯渔获物。 [下面是更新普拉克（http://plunker.co/edit/94qcX7GNJoheX9XWuqZS）反映$手表。 – rGil

AngularJS指令无法呈现更换DOM

回答

相关问题