1

Web アプリケーションの「アクティビティ」をグラフィカルに表すカスタム angular ディレクティブがあります。私はこのように使用します：

<activity-box ng-repeat="act in activities"
    model="act" active="{{currentActivity == act}}" />

私のディレクティブには分離されたスコープがあり、次のように宣言されていmodelますactive。

appDirectives.directive('activityBox', function() {
    return {
        template: '<div ng-class="{activityActive: active == \'true\'}">{{model.name}}</div>',
        restrict: 'E',
        replace: true,
        scope: {
            model: '=',
            active: '@'
        },
        link: ...
    };
});

属性については心配していませんmodelが、私のactive属性は常に文字列として扱われます。currentActivity == actが true の場合、active文字列値"true"( boolean ではなくtrue) を保持するか、そうでない場合"false"( ではなくfalse) を保持します。

これは、概念的にはブール値ですが、文字列として扱う必要があることを意味します。ng-class="{activityActive: active}"たとえば、代わりに書きたいと思いますng-class="{activityActive: active == 'true'}"。現在、余分な部分を忘れた場合、これは常に true と評価されます。両方とも true"false"です"true"。

このような文字列以外の属性を取得する方法はありますか? これを達成するための最良の方法は何ですか？

4

2 に答える 2

1

どうですか？

<activity-box ng-repeat="act in activities"
    model="act" active="currentActivity == act" />

scope: {
            model: '=',
            active: '='
        },

試してみました-動作します。また、バインディングがあるため、「currentActivity」または「act」が変更されると、ディレクティブ内の「active」の値も変更されます。

于 2014-05-16T13:40:53.580 に答える
1

上記のコードに示されているように、ディレクティブはタグに関連付けられていません。

デフォルトでは、ディレクティブは属性のみに制限されており、要素として使用しようとしています。

ディレクティブに次の行を追加します。

replace: true,
restrict: 'E', // <--- This line
scope: {

編集スコープを定義するときに 使用して親スコープにリンクすることにより、アクティブフラグで受け入れることができますが=、ディレクティブでそれを変更すると、コントローラーのスコープで変更されます

active="currentActivity == act"
scope: { active: '=' }

ただし、文字列を介して受け入れ、$parseサービスを使用してコントローラーで解析できます。

active="{{currentActivity == act}}"
scope: { active: '@' }
link: function(scope){
    var booleanValue = $parse(scope.active)();
}
于 2014-05-16T13:48:07.180 に答える