angularjs-scope - ng-init + ng- Controller : strange behavior in the controller's scope

Question

我是 Angular 的新手，但真的很喜欢它的方法。我有一个 HTML 文件，我正在用 ng-init 初始化一个变量在 <div>元素，我也在其中声明了一个带有 ng-controller 的 Controller 指令:

<div ng-controller="myCtrl" ng-init='foo="bar"'>

如果我 console.log $scope来自 Controller 脚本的对象我可以看到 foo列出了其他属性，但是当我尝试从同一个脚本访问它时，它给了我 undefined .我也在用 Batarang它向我展示了 <div> 的模型-范围还包括 foo属性(property)。

我从 Pass variables to AngularJS controller, best practice? 的第二个答案中知道我可以通过移动我的 ng-init 来解决问题指令到外部 <div> ，但我想知道幕后到底发生了什么。非常感谢任何帮助，提前致谢。

编辑
div 中指令的顺序元素无所谓。即使 ng-init问题仍然存在在 ng-controller 之前指定

Answer 1

好的，我想我明白了
ng-init的不同行为在外部/内部 els 中出现是因为 Angular 执行其编译阶段的方式。编译由不同的步骤组成。在这种情况下最相关的是:

Controller 实例化

预链接

友情链接

后链接

在每个 DOM 节点的基础上按此顺序发生(即对于每个节点， Controller 代码(如果存在)在任何预链接、链接或后链接 f 之前执行)
ng-init注册 pre -link f 在它指定的节点上，其中 $eval s 指令的内容(在我的示例中， f 为 foo Prop 赋值)。因此，当执行同一节点的 Controller 代码时，该 Prop 尚不存在，这与@Aron 的答案一致

在编译阶段，Angular 在深度优先的基础上从根向下遍历 DOM，这意味着父 el 在它们的子之前编译。把 ng-init外部 el 中的指令允许子节点的 Controller 继承外部的作用域。这解释了“外部 el” hack

hack @Aron 指向在 Prop 上注册一个观察者，这样，当 Prop 最终是 $eval 时在预链接阶段，回调 f 可以找到它

我建议基于异步 JS 和 Angular 特性的另外两种可能的 hack(参见 this jsFiddle)。一涉及使用 setTimeout JS 原生 f，而另一个更“Angular”并诉诸 $evalAsync
恕我直言，Angular 对 ng-init 的实现存在缺陷关于声明意图的指令。我已经破解了 Angular 的代码来试验不同的实现。这并不难(添加了 2 行代码，甚至在可能删除 ng-init 指令 native 代码之前)，并且适用于上面 jsFiddle 中的代码，但我还没有在复杂的应用程序上对其进行测试。对于那些感兴趣的人，这是我正在做的事情(引用 v 1.2.0-rc2):

在 applyDirectivesToNode f 块我声明了一个未初始化的 nodeHasInitData本地变量

在同一个f后，本地directiveName var 被分配了 directive.name prop 值，我针对 "ngInit" 测试它静态字符串，这是 Angular 分配给 ng-init 的规范化名称在节点上声明时的指令

如果测试通过，我设置 nodeHasInitData至 true .如果测试失败，则什么都不做(-> nodeHasInitData 在闭包中仍然是 undefined)

在 nodeLinkFn f 块，在 if 之前检查节点中是否存在 Controller 的块(上面列表中的第 1 步)，我正在添加对 nodeHasInitData 的值的测试(我可以这样做，因为 nodeLinkFn 被定义在 applyDirectivesToNode 中)

如果测试通过，我调用 scope.$eval(attrs.ngInit) ，这就是native ng-init的prelink f指令。两者 scope和 attrs是 nodeLinkFn 的原生参数，所以它们是可用的。如果测试失败，则不执行任何操作

这样，我将初始化从第 2 步移到了新的第 0 步，它在执行相应 Controller 的代码之前提供给内部 el 作用域

1. 其实我已经复制过了，因为 ng-init定义的prelink f指令还在。然而，这不是什么大问题，我认为可以通过更改/删除指令对象轻松避免

编辑

为了避免复制，为了上述黑客的说明目的，替换 ngInitDirective 的赋值代码是安全的。带 var ngInitDirective = valueFn({}); 的角度变量