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

使用する代わりに、次のように ng-style を使用してみてstyle="background-color: {{category.color}};"ください。

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

これは、一貫して必要なマークアップを作成する更新されたフィドルです。

于 2013-06-04T05:49:47.093 に答える