ng-mô hình không hoạt động bên trong ng-include

Tôi là người mới bắt đầu trong angularjs và hiện tại tôi đang đối mặt với một vấn đề với ng-include.ng-mô hình không hoạt động bên trong ng-include

Tôi có một ứng dụng thử nghiệm sử dụng partials. Đây là mã của tôi.

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

Mã phần view.html là

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

Đối với một số lý do, textboxVal thiết lập để ng-mô hình không được cập nhật khi tôi nhập giá trị vào hộp văn bản. Nhưng điều này hoạt động tốt nếu tôi không sử dụng ng-include và trực tiếp thêm nội dung của view.html vào tệp html chính. Xin vui lòng giúp đỡ.

Cảm ơn Sunil

Nguồn

2015-09-25 Sunil Raj

ng-include tạo phạm vi mới –

ok, vì vậy tôi có thể làm cho nó hoạt động không? –

Kiểm tra câu trả lời của tôi bên dưới –

Sử dụng $ parent để truy cập phạm vi của bộ điều khiển

Demo

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

Nguồn

2015-09-25 06:07:08

Vấn đề là ngInclude tạo ra phạm vi mới, vì vậy mô hình bạn định nghĩa bên trong mẫu một phần với ngModel công trình có giá trị phạm vi địa phương, trong và bên ngoài ExampleController không thể nhìn thấy nó.

Giải pháp đơn giản là sử dụng chuỗi nguyên mẫu của các đối tượng phạm vi, sau đó phạm vi bên trong sẽ kế thừa và sử dụng giá trị mô hình từ phạm vi bên ngoài:

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

và sau đó sử dụng nó trong một phần như

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

Nguồn

2015-09-25 05:39:28 dfsq

ng-mô hình không hoạt động bên trong ng-include

Trả lời

Các vấn đề liên quan