javascript - myVar 绑定(bind)到哪个元素？ `ng-init` 的问题

Question

这个问题已经有答案了:

What are the nuances of scope prototypal / prototypical inheritance in AngularJS? (3 个回答)

已关闭 6 年前。

我想知道使用 ng-init 时幕后发生了什么.

有时ng-init做了一些意想不到的事情，并且我很难调试。

<小时/>

假设我有以下结构:

<!-- App -->
<div ui-view>

    <!-- Component -->
    <custom-component>

        <!-- Transcluded component -->
        <transcluded-component>

            <!-- Controller -->
            <div ng-controller="MyCtrl">

                <!-- Element -->
                <div ng-init="myVar = 'hello'">

                    {{myVar}}

                </div>
            </div>
        </transcluded-component>
    </custom-component>
</div>

哪个元素myVar绑定(bind)到？

<小时/>

编辑2017-07-21:添加示例

在下面的模板 block 中(特别是在 ng-repeat 中)，我可以使用 ng-init :

<span ng-init="path = getPath()">
    <a ng-if="path" ng-href="path">
        Click here
    </a>
    <span ng-if="!path">
        Some text
    </span>
</span>

在这种情况下，我跳过了函数调用两次，并保持模板干净。

Answer 1

有时ng-init做了一些意想不到的事情，我很难调试。

ng-init directive在其元素范围的上下文中计算 Angular 表达式。许多指令( ng-repeat 、 ng-controller 、 ng-if 、 ng-view 等)创建自己的作用域。

欲了解更多信息，请参阅

• AngularJS Developer Reference - scopes
• AngularJS Wiki - Nuances of Scope Prototypical Inheritance

<小时/>

避免使用ng-init

避免使用ng-init 。它混淆了模型和 View ，使代码难以理解、调试和维护。而是在 Controller 中初始化模型。

来自文档:

ngInit

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

— AngularJS ng-init Directive API Reference

<小时/>

更新

Q: I've also added an example of a code block I sometime use.

        <!-- Controller -->
        <div ng-controller="MyCtrl">
            <!-- Element -->
            <div ng-init="myVar = 'hello'">
                {{myVar}}
            </div>
        </div>

在 Controller 中进行等效的初始化:

app.controller("MyVar", function($scope) {
    this.$onInit = function() {
        $scope.myVar = 'hello';
    };
});

作者:separating concerns模型和 View 的结合，代码变得更容易理解、调试和维护。