AngularJS $ scope. $ Uhr auf JSON-Objekt arbeiten nicht in Richtlinie

Question

ich etwas offensichtlich hier bin fehlt. In meiner Direktive habe ich eine funktionierende bidirektionale Datenbindung, aber ich kann $ scope nicht verwenden. $ Watch() um Änderungen zu überwachen, die im js-Objekt des übergeordneten Bereichs auftreten können.

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

Wie Sie sehen können, wenn ich versuche, zu beobachten $ zu verwenden, um auf attrs.dirModel der resultierende Wert ist nicht definiert und es wird nichts weiter beobachtet, auch wenn ich das Objekt nach einer kurzen Verzögerung werde ändern. Ich habe auch versucht, das wahre Flag auf der $ watch-Anweisung zu verwenden (und nicht zu verwenden).

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); 
       } 
      } 
     } 
}]); 

Answer 1

Da Sie verwenden '=', haben Sie eine lokale Richtlinie Anwendungsbereich Eigenschaft dirModel. Nur $ Uhr, dass:

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