12

ここで明らかな何かが欠けています。私のディレクティブでは、双方向のデータバインディングが機能していますが、 $scope.$watch() を使用して、ディレクティブの親スコープ js オブジェクトで発生する可能性のある変更を監視できないようです。

http://jsfiddle.net/Kzwu7/6/

ご覧のとおり、attrs.dirModel で $watch を使用しようとすると、結果の値は定義されておらず、少し遅れてオブジェクトを変更しているにもかかわらず、それ以上何も監視されません。また、$watch ステートメントで true フラグを使用して (使用せずに) 試しました。

HTML:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

<div ng-app="test" ng-controller="MainCtrl">
    <dir dir-model="model"></dir>
    <p>{{model.tbdTwoWayPropA}}</p>
</div>

<script type="text/ng-template" id="template">
    <div class="test-el">{{dirModel.tbdTwoWayPropB}}</div>
</script>

JS:

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

app.controller("MainCtrl", [
    "$scope", "$timeout",
    function($scope, $timeout){
        $scope.model = {
            tbdTwoWayPropA: undefined,
            tbdTwoWayPropB: undefined,
            tbdTwoWayPropC: undefined
        }

        // TBD Ajax call
        $timeout(function(){

            // alert("Model updated, but $scope.$watch isn't seeing it.");

            $scope.model.tbdTwoWayPropA = 1;
            $scope.model.tbdTwoWayPropB = 30;
            $scope.model.tbdTwoWayPropC = [{ a: 1 },{ a: 2 },{ a: 3 }];

        }, 2000)
    }
]);

app.directive('dir', [
  "$timeout",
  function($timeout) {
      return {
          restrict: "E",
          controller: function($scope){
              $scope.modifyTwoWayBindings = function(){

                  // Two-way bind works
                  $scope.dirModel.tbdTwoWayPropA = 2;
              }

              $timeout(function(){
                  $scope.modifyTwoWayBindings();
              }, 4000);
          },
          scope: {
              dirModel: '='
          },
          template: $("#template").html(),
          replace: true,
          link: function($scope, element, attrs) { 

            $scope.$watch( attrs.dirModel, handleModelUpdate, true);

              // alert(attrs.dirModel);

              function handleModelUpdate(newModel, oldModel, $scope) {
                  alert('Trying to watch mutations on the parent js object: ' + newModel);
              }
          }
      }
}]);
4

1 に答える 1

19

「=」を使用しているため、ローカル ディレクティブ スコープ プロパティがありますdirModel。$watch するだけです:

$scope.$watch('dirModel', handleModelUpdate, true);
于 2013-03-11T17:45:07.637 に答える