3

AngularJS（および関連する）ドキュメントと、ディレクティブ内の分離されたスコープに関するその他のスタックオーバーフローの質問を確認した後、私はまだ少し混乱しています。親スコープとディレクティブ分離スコープの間で双方向バインディングを実行できないのはなぜですか。親スコープのプロパティはオブジェクトであり、属性ではありません。目的のプロパティをオフに使用する必要がありますscope.$parentか？それは間違っているようです。よろしくお願いします。

関連するフィドルはこちらです。

HTML：

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div my-directive>{{test.name}}</div>
    </div>
</div>

JavaScript：

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope) {
    $scope.test = {name:"name", value:"value"};
});

myApp.directive("myDirective", function () {
    return {
        replace: true,
        restrict: 'A',
        scope: {test: '='},
        template: '<div class="parent"><div>This is the parent Div.</div><div>Value={{test}}</div></div>',
        link: function (scope, element, attrs) {
            console.log("scope.test=["+scope.test +"]");
            console.log("scope.$parent.test=["+scope.$parent.test.name+"]");
        }
    };
});
4

1 に答える 1

9

分離スコープを使用するディレクティブの場合、属性を使用して、ディレクティブ分離子スコープがアクセスする必要のある親スコープのプロパティを指定します。'='は双方向バインディングを提供します。「@」は「一方向文字列」を提供します。「＆」は一方向の式を提供します。

親スコープオブジェクトプロパティへのディレクティブ（双方向バインディング）アクセスを許可するtestには、次のHTMLを使用します。

<div my-directive test="test"></div>

別の名前を使用する方が有益な場合があります。

<div my-directive some-obj-prop="test"></div>

次に、ディレクティブで：

scope: { localDirProp: '=someObjProp'},
template: '<div ...>Value={{localDirProp}}...',

Isolateスコープは、通常、親スコープから継承しないため、親スコープのプロパティにアクセスできません（「@」、「=」、または「＆」が使用されている場合を除く）。を使用$parentすることは、親スコープにアクセスする方法ですが、プロトタイプの継承を介する方法ではありません。Angularは$parentスコープにこの特別なプロパティを作成します。通常（つまりベストプラクティス）、使用しないでください。

于 2013-03-21T00:12:08.680 に答える