ng-model 在 ng-include 中不起作用

Question

我是 angularjs 的初学者，目前我遇到了 ng-include 的问题。

我有一个使用 partials 的测试应用程序。这是我的代码。

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

出于某种原因，当我在文本框中输入值时，设置为 ng-model 的 textboxVal 没有更新。但是如果我不使用 ng-include 并直接将 view.html 的内容添加到主 html 文件中，这就可以正常工作。请帮忙

谢谢苏尼尔

Answer 1

问题是 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">

Answer 2

使用$parent访问控制器的作用域

Demo

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

ng-model 在 ng-include 中不起作用

ng-model not working inside ng-include

javascript

angularjs

angularjs-ng-include