AngularJs - 使用 ng-controller 和 ng-include答案

【问题标题】：AngularJs - Using ng-controller with ng-includeAngularJs - 使用 ng-controller 和 ng-include
【发布时间】：2016-09-04 19:36:50
【问题描述】：

这行得通：

<div ng-include="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></div>

但是，这不会（{{test}} 不输出任何内容）：

<ng-include src="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></ng-include>

有什么原因吗？还是bug？

<p>{{test}}</p>

登录控制器：

function LoginController($scope){
    $scope.test = 'login';
}

【问题讨论】：

它不起作用是什么意思？它不显示？控制器没有传入范围变量？它显示一只猴子？
查看我更新的问题。谢谢。

标签： javascript angularjs angularjs-ng-include ng-controller

【解决方案1】：

我不确定“loggedIn”是在哪里定义的，但是当我在父控制器上定义它时，两种语法都按预期工作。

Plunkr

<div ng-controller="PrntCtrl">
      <div ng-include="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></div>
      <ng-include src="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></ng-include>
    </div>

需要考虑的一些问题：你使用的是什么版本的角度？您的应用程序是如何定义的，控制器是如何向应用程序注册的？ “登录”在哪里定义？

【讨论】：

【解决方案2】：

因为这个指令只接受 3 个参数：

ng包括 | src = 字符串
onload（可选）= 字符串
自动滚动（可选）= 字符串

...根据ngInclude Docs

编辑：

你可以简单地将它包装在另一个元素中来解决......

<div ng-if="!loggedIn" ng-controller="LoginController">
  <div ng-include="'login.html'" flex></div>
</div>

【讨论】：

那我为什么要把ng-if放在那里呢？ ng-if 适用于这两个示例。
你可以解决简单地将它包装在另一个元素中...<div ng-if="!loggedIn" ng-controller="LoginController"><div ng-include="'login.html'" flex></div></div>