1

分離スコープを持つディレクティブが、parent.parent スコープへのバインディングを介して変更を加えていないという問題があります。

要約すると、親プロパティにバインドされているディレクティブのisolateスコープ内のプロパティに加えられた変更は、そのプロパティの親スコープ全体に伝播することを期待しています(プロパティは最初にparent.parentスコープから継承されました) 、しかしそうではありません。直接の親スコープの値のみを変更しますが、parent.parent スコープには古い値があります。さらに悪いことに、parent.parent スコープ プロパティへの変更は、isolate スコープまたはその直接の親にまで及ばなくなりました。これは、Angularスコープが構築されているJavascriptのプロトタイプ継承の通常の動作であることを理解していますが、この双方向データバインディングの場合は望ましくないため、Angularで解決策を探しています.

動作の例を次に示します: http://jsfiddle.net/abeall/RmDuw/344/

私の HTML にはコントローラー div ( MyController1) が含まれており、その中には別のコントローラー div ( MyController2) があり、その中にはディレクティブ ( MyDirective) があります。

<div ng-controller="MyController">
    <p>MyController1: {{myMessage}} <button ng-click="change()">change</button></p>
    <div ng-controller="MyController2">
        <p>MyController2: {{myMessage}} <button ng-click="change()">change</button></p>
        <p>MyDirective: <my-directive message="myMessage"/></p>
    </div>
</div>

Javascript はmyMessage外側のMyControllerスコープで定義し、内側のスコープはディレクティブをMyController2継承してバインドmyMessageし、分離スコープ プロパティとして定義します。各レベルで、ローカル メッセージ プロパティを変更する関数が定義されます。messageMyDirectivemessagechange()

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

function MyController($scope) {
    var count = 0;
    $scope.myMessage = "from controller";
    $scope.change = function(){
        $scope.myMessage = "from controller one " + (++count);
    }
}

function MyController2($scope) {
    var count = 0;
    $scope.change = function(){
        $scope.myMessage = "from controller two " + (++count);
    }
}

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<span>Hello {{message}} <button ng-click="change()">change</button></span>',
        scope: {
            message: "="
        },
        link: function(scope, elm, attrs) {
            var count = 0;
            scope.change = function(){
                scope.message = "from directive " + (++count);
            }
        }
    };
});

あなたが気付くのは次のことです：

  • の変更ボタンを数回クリックMyController1すると、すべてのレベルが更新されます (下に継承されます)。

  • 次にMyDirectiveの変更ボタンをクリックすると、更新されますMyController2(上にバインドされます) が、まったく変更MyController1されません。

  • この時点以降、 の変更ボタンをクリックしても、範囲にMyController1滴り落ちることはなくなり、その逆も同様です。2人は現在、互いに離れています。これが問題です。MyController2MyDirective

だから私の質問は：

  • Angular には、スコープ プロパティ (myMessageこの場合) のバインディングまたは継承を許可して、親スコープまで細流化する方法がありますか?

  • そうでない場合、ディレクティブのisolateスコープの変更をparent.parentコントローラースコープのプロパティにどのように同期する必要がありますか? ディレクティブは、その親の構造について知ることができません。

4

2 に答える 2

1

@Claiesが述べたように、使用controller asは素晴らしいアイデアです。このようにして、更新するスコープを直接指定できるほか、メソッド内でスコープを簡単に渡すことができます。

これは、おそらく期待していた結果のフィドルです

構文： ng-controller="MyController as ctrl1"

次に内部：{{ctrl1.myMessage}}またはng-click="ctrl1.change()"およびclick="ctrl2.change(ctrl1)"

$scopeこれにより、他の理由でモデルを保持する必要がない限り、依存関係を除外することで、コントローラーの記述方法が変更されます。

function MyController () {
  var count = 0
  this.myMessage = "from controller"
  this.change = function () {
    this.myMessage = "from controller one " + (++count)
  }
}

function MyController2 () {
  var count = 0
  this.change = function (ctrl) {
    ctrl.myMessage = "from controller two " + (++count)
  }
}
于 2015-07-21T18:22:18.477 に答える
0

最も簡単な変更は、ルート コントローラーで $scope.msg の代わりに $scope.msg.mymessage を使用することです。

function MyController($scope) {
    var count = 0;
    $scope.msg = {};
    $scope.msg.myMessage = "from controller";
    $scope.change = function(){
        $scope.msg.myMessage = "from controller one " + (++count);
    }
}

これは、意図した結果を備えたフォークされたフィドル (変に聞こえます) です。

http://jsfiddle.net/nk5cdrmx/

于 2015-07-21T18:23:04.523 に答える