2015-09-25 19 views
7

मैं angularjs में एक नौसिखिया हूं और वर्तमान में मुझे एनजी-शामिल के साथ एक समस्या का सामना करना पड़ रहा है।एनजी-मॉडल एनजी के अंदर काम नहीं कर रहा है-

मेरे पास आंशिक उपयोग करके एक परीक्षण ऐप है। यहां मेरा कोड है।

<html ng-app ="TextboxExample"> 
    <head> 
     <title>Settings</title> 
     <script src="angular.js"></script> 
    </head> 

    <body ng-controller="ExampleController"> 
     <div ng-include src = "'view.html'"></div> 
     <script> 
      angular.module('TextboxExample', []) 
      .controller('ExampleController', ['$scope', function($scope) { 
       $scope.textboxVal = 'fddfd'; 

       $scope.ReadGeneralSettings = function() { 
       alert($scope.textboxVal); 
       } 
       $scope.ResetGeneralSettings = function() { 

       $scope.textboxVal = 'fddfd'; 
       } 

      }]); 
     </script> 
     <button class="pull-right" ng-click = "ReadGeneralSettings()">Read</button> 
     <button class="pull-right" ng-click = "ResetGeneralSettings()">Cancel</button> 



    </body> 
</html> 

आंशिक कोड view.html

<input type="text" ng-model="textboxVal"> 

है किसी कारण से, textboxVal एनजी मॉडल के लिए सेट अद्यतन नहीं प्राप्त करता है जब मैं पाठ बॉक्स में मान दर्ज करें। लेकिन यह ठीक काम करता है अगर मैं ng-include का उपयोग नहीं करता हूं और सीधे मुख्य HTML फ़ाइल में view.html की सामग्री जोड़ता हूं। कृपया मदद करें।

धन्यवाद सुनील

+0

एनजी-शामिल एक नया दायरा बनाता है –

+0

ठीक है, तो क्या मैं इसे काम कर सकता हूं? –

+0

नीचे मेरा जवाब देखें –

उत्तर

14
के रूप में आंशिक में इसका इस्तेमाल करते हैं

उपयोग $ माता पिता नियंत्रक के दायरे का उपयोग करने की

Demo

<input type="text" ng-model="$parent.textboxVal"> 
2

समस्या यह है कि ngInclude नई गुंजाइश बनाता है, इसलिए मॉडल आप स्थानीय गुंजाइश मूल्य के साथ ngModel काम करता है, और बाहरी के साथ आंशिक टेम्पलेट के अंदर परिभाषित ExampleController इसे नहीं देख सकते है।

सरल उपाय गुंजाइश वस्तुओं का प्रोटोटाइप श्रृंखला का उपयोग करना है, तो आंतरिक गुंजाइश के वारिस और बाहरी दायरे से मॉडल मूल्य का उपयोग करेगा:

<body ng-controller="ExampleController"> 
    <div ng-include src = "'view.html'"></div> 
    <script> 
     angular.module('TextboxExample', []) 
     .controller('ExampleController', ['$scope', function($scope) { 
      $scope.model.textboxVal = 'fddfd'; 

      $scope.ReadGeneralSettings = function() { 
      alert($scope.model.textboxVal); 
      } 
      $scope.ResetGeneralSettings = function() { 
      $scope.model.textboxVal = 'fddfd'; 
      } 

     }]); 
    </script> 
    <button class="pull-right" ng-click = "ReadGeneralSettings()">Read</button> 
    <button class="pull-right" ng-click = "ResetGeneralSettings()">Cancel</button> 

</body> 

और फिर

<input type="text" ng-model="model.textboxVal"> 
संबंधित मुद्दे