2015-09-25 24 views
7

Jestem początkujący w angularjs i obecnie mam do czynienia z problemem z ng-include.ng-model nie działa wewnątrz ng-include

Mam aplikację testową wykorzystującą częściowe. Oto mój kod.

<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> 

Kod częściowe view.html jest

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

Z jakiegoś powodu, textboxVal ustawiony NG-modelu nie jest aktualizowana, kiedy wprowadzić wartość w polu tekstowym. Ale to działa dobrze, jeśli nie używam ng-include i bezpośrednio dodam zawartość view.html do głównego pliku html. Proszę o pomoc.

Dzięki Sunil

+0

ng-include tworzy nowy zakres –

+0

ok, więc mogę sprawić, żeby działało? –

+0

Sprawdź poniżej swoją odpowiedź –

Odpowiedz

14

Zastosowanie $ rodzic dostęp do zakresu regulatora

Demo

2

Problemem jest to, że ngInclude tworzy nowe możliwości, więc model można zdefiniować wewnątrz częściowym szablonu z ngModel prac z lokalną wartość zakres, a zewnętrzna ExampleController nie może go zobaczyć.

Prostym rozwiązaniem jest zastosowanie prototypowego łańcuch obiektów zakresu, a zakres wewnętrzna posiądą i wykorzystanie wartości modelu z zakresu zewnętrzna:

<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> 

, a następnie wykorzystanie go w częściowo jako

<input type="text" ng-model="model.textboxVal"> 
Powiązane problemy