एंगुलरजेएस $ स्कोप। जेसन ऑब्जेक्ट पर $ घड़ी निर्देश के अंदर काम नहीं कर रहा है

Question

मुझे यहां कुछ स्पष्ट याद आ रही है। मेरे निर्देश में मेरे पास दो-तरफा डेटा बाध्यकारी काम कर रहा है, हालांकि मैं $ scope का उपयोग नहीं कर सकता। $ Watch() निर्देशों के माता-पिता के दायरे जेएस ऑब्जेक्ट पर होने वाले परिवर्तनों की निगरानी करने के लिए।

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

आप देख सकते हैं जब मैं $ का उपयोग attrs.dirModel पर देखने के परिणामस्वरूप मूल्य अपरिभाषित है और कुछ भी नहीं आगे देखा है, भले ही मैं कुछ विलंब के बाद वस्तु को संशोधित कर रहा हूँ करने के लिए प्रयास करें। मैंने $ घड़ी कथन पर सही ध्वज का उपयोग करने (और उपयोग नहीं) का भी प्रयास किया है।

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> 

जे एस:

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

आप '=' का उपयोग कर रहे हैं, आप एक स्थानीय निर्देश गुंजाइश संपत्ति dirModel है। बस $ देखें कि:

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