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

使用 $ parent 访问控制器的范围

Demo

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

Answer 2

问题是ngInclude会创建新范围，因此您在部分模板中使用ngModel定义的模型使用本地范围值，而外部ExampleController无法看到它。 / p>

简单的解决方案是使用范例对象的原型链，然后内部范围将继承并使用外部范围的模型值：

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

ng-model在ng-include

2 个答案: