javascript - 以下两个 AngularJS 构造之间有什么区别(如果有的话)？

Question

方法一

在 HTML 中:

<my-directive>
</my-directive>

在脚本中:

function myDirective() {
    var ddo = {
        [LOTS OF OTHER VERY IMPORTANT DIRECTIVE PROPERTIES HERE]
        controller: myController
        bindToController: true
    };
    return ddo;
}

方法2

在 HTML 中:

<my-directive ng-controller="myController">
</my-directive>

在脚本中:

function myDirective() {
    var ddo = {
        [LOTS OF VERY IMPORTANT DIRECTIVE PROPERTIES HERE]
    };
    return ddo;
}

这两种情况都有一个具有一些其他属性(模板等)的指令，但我只是更改放置 Controller 的位置。这两种方法类似吗？

Answer 1

不，首选第一种方法。

不同之处在于 Angular 处理范围的方式。

第二种方法使指令依赖于外部作用域(由 ng-controller="myController" 创建)，这违背了创建指令的要点(代码隔离)。

当您使用父作用域时，第二种方法的工作原理相同(默认情况下，当您未在指令 DDO 中设置 scope 属性时 - Ref: What is default Angular directive scope)

如果您在指令中有隔离的范围，则第二种方法将不起作用，如下创建:

scope: {
    param1: "="
}

因为您将无法从 myController 访问属性。

<小时/>

编辑:

指令规则可能很复杂，难以理解所有情况，请考虑使用 .component()，因为它更简单并且遵循最佳实践 - Introduction to Angular's components .

<小时/>

进一步阅读:

• Binding to Directive Controllers in Angular 1.3+