javascript - AngularJS Controller 功能未触发

Question

我有 3 个指令，“parenta”、“parentb”和“childb”。 "parenta"和 "parentb"是 sibling ，而 "childb"是 "parentb"的直接 child 。

我正在尝试从“parenta”调用 Controller 方法，但它不起作用。出于某种奇怪的原因，尝试从“parenta”调用“childb” Controller 上的方法正在起作用。发生了什么事？

var mod = angular.module("app", []);

mod.directive("parenta", function () {
    return {
        template: "<section><div ng-click='vm.a()'>Rendered by a</div></section>",
        replace: false,
        controllerAs: "vm",
        controller: function () {
            this.a = function () {
                console.log("a called!");
            }
        }
    }
})

mod.directive("parentb", function () {
    return {
        template: "<childb></childb>",
        replace: false
    }
})

mod.directive("childb", function () {
    return {
        template: "<section><div ng-click='vm.b()'>Rendered by b</div></section>",
        replace: false,
        controllerAs: "vm",
        controller: function () {
            this.b = function () {
                console.log("b called!");
            }
        }
    }
})

HTML:

<div ng-app="app">
    <parenta></parenta>
    <parentb></parentb>
</div>

代码笔:http://codepen.io/anon/pen/pJMpVe

Answer 1

这里的问题是您的指令不会创建子范围或隔离范围并使用 scope: false(这是默认设置)。

这意味着对于给定的范围，每个指令及其别名 Controller 创建一个名为 vm 的范围属性 - 两者都在同一范围内。因此，childb 覆盖了最初由 parenta 创建的 vm 属性。

您可以很容易地检查这一点 - 将其中一个 controllerAs 别名更改为其他别名。

一个简单的解决方法 - 也是正确的做法 - 是使用 scope: true 或 scope: {}。