पृथक गुंजाइश और एनजी-मॉडल

Question

के साथ निर्देश मैं एक निर्देश लिखने की कोशिश कर रहा हूं जो अलग-अलग दायरे और ngModel निर्देश का उपयोग करता है।

समस्या:
जब मॉडल निर्देश में अद्यतन किया जाता है तो कॉलर का मूल्य अपडेट नहीं हो रहा है।

HTML:

<test-ng-model ng-model="model" name="myel"></test-ng-model> 

निर्देशक:

app.directive(
    'testNgModel', [ 
    '$timeout', 
    '$log', 

function ($timeout, $log) { 

    function link($scope, $element, attrs, ctrl) { 
     var counter1 = 0, counter2 = 0; 

     ctrl.$render = function() { 
      $element.find('.result').text(JSON.stringify(ctrl.$viewValue)) 
     } 

     $element.find('.one').click(function() { 
      if ($scope.$$phase) return; 
      $scope.$apply(function() { 
       var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {}; 
       form.counter1 = ++counter1; 
       ctrl.$setViewValue(form); 
      }); 
     }); 
     $element.find('.two').click(function() { 
      if ($scope.$$phase) return; 
      $scope.$apply(function() { 
       var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {}; 
       form.counter2 = ++counter2; 
       ctrl.$setViewValue(form); 
      }); 
     }); 

     $scope.$watch(attrs.ngModel, function (current, old) { 
      ctrl.$render() 
     }, true) 
    } 

    return { 
     require: 'ngModel', 
     restrict: 'E', 
     link: link, 
     //if isolated scope is not set it is working fine 
     scope: true, 
     template: '<div><input type="button" class="one" value="One"/><input type="button" class="two" value="Two"/><span class="result"></span></div>', 
     replace: true 
    }; 

}]); 

डेमो: अगर Fiddle

_{अलग गुंजाइश यह सेट नहीं है ठीक काम करता है: fiddle}

Answer 1

के रूप में टिप्पणी में चर्चा की, यह आम तौर पर एनजी मॉडल के साथ एक बच्चे गुंजाइश (scope: true या scope: { ... }) का उपयोग करने की सलाह नहीं दी है। हालांकि, चूंकि अरुण को अतिरिक्त स्कोप गुण बनाने की आवश्यकता है, scope: true किसी ऑब्जेक्ट के साथ उपयोग किया जा सकता है, न कि आदिम। इस प्रोटोटाइप विरासत का लाभ उठाता है, तो $parent neeed नहीं है:

<test-ng-model ng-model="someObj.model" ...> 

fiddle

Answer 2

क्योंकि आपके द्वारा बनाए गए एक आईएसओ लेटेड स्कोप, एनजी मॉडेल = "मॉडल" आपके नए पृथक दायरे को संदर्भित करता है। आप अपने AppController दायरे का उल्लेख करना चाहते हैं, तो आप $ माता-पिता का उपयोग करना चाहिए:

<test-ng-model ng-model="$parent.model" name="myel"></test-ng-model>