0

私は自分でこれを理解することはできません。多分私は何かが足りない。コントローラーと、独自のスコープを作成するディレクティブがあります。

プランカーのリンク : http://run.plnkr.co/plunks/wFV7d2blZKEXUgHIOxYo/

以下は、3 つの変数を作成し、それぞれに対して「変更」関数を公開するだけのコントローラー コードです。

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

myApp.controller('MainController', function ( $scope, $rootScope ) {
  $rootScope.showStuff = true;
  $scope.showStuff2 = true;
  $scope.showStuffObj = { stuff : true };

  $scope.changeStuff = function () {
    $rootScope.showStuff = false;
  }

  $scope.changeStuff2 = function () {
    $scope.showStuff2 = false;
  }

  $scope.changeStuff3 = function () {
    $scope.showStuffObj.stuff = false;
  }
});

次に、ディレクティブ:

myApp.directive("mydirective", function () {
  return {
    scope : {
      showStuff : "=",
      showStuff2 : "=",
      showStuffObj : '='
    },
    restrict : "EA",
    template : "<h2>Running</h2>",
    link : function ( $scope ) {
      console.log("running directive", $scope);
      $scope.$watch("showStuff", function () {
        console.log($scope.showStuff);
      });

      $scope.$watch("showStuff2", function () {
        console.log($scope.showStuff2);
      });

      $scope.$watch("showStuffObj", function () {
        console.log($scope.showStuffObj);
      });
    }
  };
});

なぜ私はこれを得るのですか？

コンソールの結果

双方向バインディングが機能する場合、未定義ではなく、変数の実際の値が表示されるはずです。変数を更新しても時計が更新されないのはなぜですか? これは非常に紛らわしいです。

4

1 に答える 1

1

2 つの問題があります。

beniwal が言ったように、ディレクティブの属性はダッシュで区切る必要がありますが、ローカル スコープ変数はキャメルケースです。

<mydirective show-stuff="showStuff" show-stuff2="showStuff2" show-stuff-obj="showStuffObj">

.

scope : {
  showStuff : "=",
  showStuff2 : "=",
  showStuffObj : "="
},

監視を機能させるには、showStuffObj の場合、a) オブジェクトを詳細に監視するか、プロパティを直接監視する必要があります。ディープ ウォッチングはコストがかかるため、本当に必要な場合にのみ実行してください。

単一のプロパティを監視する:

  $scope.$watch("showStuffObj.stuff", function () {
    console.log($scope.showStuffObj.stuff);
  });

ディープウォッチ:

  $scope.$watch("localShowStuffObj", function () {
    console.log($scope.localShowStuffObj);
  }, true);

watch の 3 番目のパラメーターを true に設定すると、ディープ ウォッチングがオンになります。

plnkr: http://plnkr.co/edit/sxfIK16kTffxr4Z1R80s?p=preview

于 2013-06-17T08:11:53.957 に答える