Question

这是一个Plunker：http://plnkr.co/edit/F6QM4KUU8DPNq6muInGS?p=preview

包含带有ng-include的html文件，将ng-controller设置在同一个标签中，不会更新控制器的范围模型。直接在html内部使用ng-model可以很好地工作，并且还可以在包含的html文件中设置控制器。但ng-include与ng-controller $ scope.models一起不会更新并保持不变。无论出于何种原因，如果您在控制器内部设置模型，它就会完成它的加载。但是设置模型的方法（不包含在plunker中）只会改变控制器范围内的mdoel而不是html。

此外，如果我在另一个控制器的范围内使用ng-include并且想要访问包含的模型，则返回undefined或将模型设置为的值。从包含的html中调用方法在两种情况下都可以正常工作，但由于值不正确，它们无法正常运行。

我看到一个类似的问题已经发布了，应该已经解决了（https://github.com/angular/angular.js/issues/4431），但正如你可以在我看来那样，但事实并非如此。

我是否会遗漏某些内容，或者这是一个有角度的问题？

亲切的问候， BH16

PS：以下是Plunker的代码： index.html - body

<body ng:controller="MainCtrl">
  <input type="text" ng:model="input">{{input}} {{getInput()}}
  <div ng:include="'main2.html'" ng:controller="Main2Ctrl"></div>
</body>

main2.html

<div>
  <input type="text" ng:model="input2">{{input2}} {{getInput2()}}
</div>

的script.js

angular.module('testApp', [])
  .controller('Main2Ctrl', function($scope) {
    $scope.input2 = 1234;
    $scope.getInput2 = function() {
      console.log("input2");
      return $scope.input2;
    };
  })
  .controller('MainCtrl', function($scope) {
    $scope.input = 1234;
    $scope.getInput = function() {
      console.log("input");
      return $scope.input;
    }
  });

Answer 1

对于所有遇到此问题的人：只需使用controllerAs语法：http://toddmotto.com/digging-into-angulars-controller-as-syntax/

这解决了上述所有问题并简化了代码A LOT！

这是控制器的基本思想（取自上面的网站）：

<div ng-controller="MainCtrl as main">
  {{ main.title }}
  <div ng-controller="AnotherCtrl as another">
    Scope title: {{ another.title }}
    Parent title: {{ main.title }}
    <div ng-controller="YetAnotherCtrl as yet">
      Scope title: {{ yet.title }}
      Parent title: {{ another.title }}
      Parent parent title: {{ main.title }}
    </div>
  </div>
</div>

Answer 2

这与ng-include创建它自己的范围有关。要查看实际发生的情况，您可以尝试使用插件（对于谷歌浏览器，也可能存在类似其他浏览器类似的内容）：“AngularJS Batarang”，它将包含用于开发工具的附加选项卡。

可能的解决方案是：

main2.html:

<div ng:controller="Main2Ctrl">
  <input type="text" ng:model="input2"> {{input2}} {{getInput2()}}
</div>

http://plnkr.co/edit/daIehNjxWdam3NyH3ww4?p=preview

ng控制器的范围不会随ng Include一起更新

2 个答案: