AngularJS：与scope.apply无法正常工作的控制器通信指令

Question

我有一个MainController和一个嵌套的指令。我正在查看this example以了解控制器和指令之间的通信是如何工作的，但我的工作似乎不起作用。

基本上，我想从自定义指令（按钮空车）调用主控制器范围功能。请参阅下面的plunkr示例。

Plukr：http://plnkr.co/edit/82STLkKxBK6htTnmnqlu?p=preview

每当我执行console.log（范围。$ apply（“emptyCart（）”））时，由于某种原因它是未定义的。

注意：我试图尽量避免使用$ rootScope.broadcast ......

Answer 1

您正在为父指令使用隔离范围，因此子指令无权访问控制器的范围。

为了在保持父对象隔离的同时为子指令提供对该作用域函数的访问权限，可以在父指令中将该函数添加为scope: { ... }属性：

scope: {
  ...
  emptyCart: '='
}

并将函数名称设置为父指令的视图声明中的相应属性：

<div ... data-show="showPopup" empty-cart="emptyCart"></div>

然后，您可以跳过您在Plunker中尝试使用的所有变通方法，只需在子指令上设置ng-click即可触发控制器功能：

sHTML = "<button ... ng-click='emptyCart()'>Empty cart</button>";

Demo