web-dev-qa-db-ja.com

親スコープをAngularスコープ付きディレクティブ：trueから更新できますか？

ディレクティブで親コントローラーからスコープを継承する必要があります。必ずしもスコープから離れる必要はありません：false。また、適切にリンクしたい値を取得するために多くの作業が必要になるため、必ずしも孤立したスコープを使用する必要はありません（親コントローラーの多くの値を考えてください）。

親スコープを更新する場合、ディレクティブでscope:trueを使用するのは理にかなっていますか？

<div ng-controller="MyCtrl">
      Hello, {{name}}!
        <my-directive></my-directive>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Dave';
}


myApp.directive('myDirective', function() {
    return {
        scope: true,
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            scope.updateName = function(newName) {
                console.log('newName is: ' + newName);
                scope.name = newName;
            }
        },
        template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>'
    }
})

fiddle をチェックしてください

angularjsangularjs-directiveangularjs-scope
33
binarygiant

@ user1737909は既にSOを読む質問を参照していますが（ AngularJSのスコーププロトタイプ/プロトタイプ継承のニュアンスは何ですか？ 、問題を説明し、さまざまな方法を推奨しますそれを修正する）、私たちは通常SOで答えをしようとします。

そのため、フィドルが機能しない理由は、プリミティブ型（つまり、文字列、数値、またはブール型）が書き込まれるとき、たとえばscope.name = newName-「書き込み」は常にローカルスコープ/オブジェクトになります。つまり、子スコープは、同じ名前の親プロパティをシャドウする独自のnameプロパティを取得します。修正方法は、親スコープでプリミティブ型ではなくオブジェクトを使用することです。その後、子スコープはそのオブジェクトへの参照を取得します。オブジェクトのプロパティへの書き込み（親または子からの書き込み）は、その1つのオブジェクトに送信されます。 （子スコープは独自のオブジェクトを取得しません。）

$scope.obj = {name: 'Dave'};

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

scope.obj.name = newName;

およびHTML：

Hello, {{obj.name}}!

fiddle

50
Mark Rajcok

スコープの継承は、子の値を設定することはその親の値を設定することを意味しません。

子スコープでscope.name = newNameを行う代わりに、親スコープにメソッドを追加します。これにより、親スコープで同じジョブが実行され、子はこのメソッドを継承するため、子スコープから呼び出します。

15
lib3d

リンク関数内で、次のように親スコープ（グローバル "$ scope"スコープ）に書き込みます。scope。$ parent.name = newName;

6
Rebekah Waterbury