Javascript AngularJS控制器功能未触发

我有3条指令，“parenta”、“parentb”和“childb”。“parenta”和“parentb”是兄弟姐妹，而“childb”是“parentb”的直系子女

我试图从“parenta”调用一个控制器方法，但是它不起作用。出于某种奇怪的原因，尝试从“parenta”调用“childb”控制器上的方法反而起作用。发生了什么事

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!");
            }
        }
    }
})

var mod=angular.module（“应用程序”，[]）；
mod.指令（“parenta”，函数（）{
返回{
模板：“由，
替换：false，
controllerAs:“虚拟机”，
控制器：函数（）{
this.a=函数（）{
log（“a called！”）；
}
}
}
})
mod.指令（“parentb”，函数（）{
返回{
模板：“”，
替换：false
}
})
mod.指令（“childb”，函数（）{
返回{
模板：“由b呈现”，
替换：false，
controllerAs:“虚拟机”，
控制器：函数（）{
this.b=函数（）{
log（“b调用了！”）；
}
}
}
})

Html:

---

Codepen:

这里的问题是，您的指令不创建子级或隔离作用域，而是使用

scope:false

（这是默认值）

这意味着，对于给定的作用域，每个指令及其别名控制器都在同一个作用域上创建一个名为

vm

-两者都的作用域属性。因此，

childb

覆盖最初由

parenta

创建的

vm

属性

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

---

一个简单的修复方法是使用

scope:true

或

scope:{}

我使用了链接函数而不是控制器

指令控制器在AngularJS中用于指令间通信，而 链接函数是完全包含的，并且特定于指令实例。断指 通信，我们的意思是当元素上的一个指令想要通信时 在其父元素或同一元素上使用另一个指令。这包括 共享状态或变量，甚至函数

在下面的代码中，我对控制器函数和放置链接函数进行了注释

var mod=角度模块（“应用程序”，[]）；
mod.指令（“parenta”，函数（）{
返回{
/*模板：“由*/
模板：“由，
替换：false，
链接：函数（$scope、$element、$attrs）
{
$scope.a=函数（）
{        		
log（“a called！”）；
}
}        
/*controllerAs:“虚拟机”，
控制器：函数（）{
this.a=函数（）{
警报（“一声呼叫！”）；
log（“a called！”）；
}
}        
*/
}
})
mod.指令（“parentb”，函数（）{
返回{
模板：“”，
替换：false
}
})
mod.指令（“childb”，函数（）{
返回{
模板：“由b呈现”，
替换：false，
controllerAs:“虚拟机”，
控制器：函数（）{
this.b=函数（）{
log（“b调用了！”）；
}
}
}
})

您没有编写角度指令，您的指令看起来像是半指令和半控制器的混合体！？！请检查文档或重命名

controllerAs

property:-）@Grundy中的值，我只建议将重命名作为测试。我认为这样做是不对的，因为指令不应该“污染”其运行范围。“重命名”解决了当前的问题，但它只是等待一个难以跟踪的错误出现。我将创建一个独立的作用域，这符合我的目的。@NewDev，是的：-）这只是另一个快速修复：-）

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