18

スコープ プロパティを設定する必要がある ng-repeater 内にディレクティブがあります。ここでフィドルを参照してください: http://jsfiddle.net/paos/CSbRB/

問題は、スコープ プロパティが次のような属性値として与えられることです。

<button ng-update1="inputdata.title">click me</button>

このディレクティブは、スコープ プロパティ inputdata.title を何らかの文字列に設定することになっています。これは動作しません：

app.directive('ngUpdate1', function() {
    return function(scope, element, attrs) {
        element.bind('click', function() {
            scope.$apply(function() {
                scope[ attrs.ngUpdate1 ] = "Button 1";
            });
        });
    };
});

ただし、直接割り当てることは機能します。

scope["inputdata"]["title"] = "Button 1";

でスコープ プロパティを設定する方法を教えてください。ディレクティブからその名前に表記？

PS: フィドルがリピーターを使用している理由は、ディレクティブが子スコープにあるためです。それらが子スコープにある場合、プリミティブであるスコープ プロパティに書き込むことはできません。そのため、"." を含むオブジェクト プロパティが必要です。名前に。ここで長い説明を参照してください: AngularJS におけるスコープ プロトタイプ/プロトタイプ継承のニュアンスは何ですか?

ありがとうございました

4

2 に答える 2

2

全体的な目的が何であるかはわかりませんが、1 つの方法は、2 つの属性を作成することです。1 つはターゲット オブジェクト用で、もう 1 つはそのオブジェクトのプロパティ用です。

<button ng-update1  obj="inputdata" prop="title">

app.directive('ngUpdate1', function() {
    return function(scope, element, attrs) {
        element.bind('click', function() {
            scope.$apply(function() {                
                scope[ attrs.obj ][attrs.prop] = "Button 1";               

            });
        });
    };
});

デモ: http://jsfiddle.net/CSbRB/9/

または、既存の形式を使用しsplit()て、現在のng-update1属性の値を使用し、表記法でオブジェクトとプロパティの結果配列を使用できます

 element.bind('click', function() {
           var target=attrs.ngUpdate1.split('.');
            scope.$apply(function() {                
                scope[ target[0] ][target[1]] = "Button 1";               

            });
        });

両方のアプローチのデモ: http://jsfiddle.net/CSbRB/10/

ディレクティブで分離スコープを作成し、オブジェクトへの参照を渡し、属性からプロパティ名をプルできるもう 1 つのアプローチinputdata(2 番目のバージョンと同じマークアップ):

app.directive('ngUpdate3', function () {
    return {
        scope: {
           targetObject: '=obj'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function () {  
               scope.$apply(function () {
                    scope.targetObject[attrs.prop]='Button 3';

                });
            });
        }
    }
});

http://jsfiddle.net/CSbRB/11/

于 2013-03-30T19:08:11.803 に答える