Question

我有一个带有一些样板html的指令，包括一个菜单切换按钮。

在该指令中（transcluded）是许多不同的嵌套指令之一，每个指令都带有它自己的菜单。

外部指令具有独立的范围，而内部指令没有指定范围。

当我单击外部指令上的菜单切换按钮时，我希望能够显示/隐藏内部指令中包含的菜单。

如何将toggle值的变化从outer指令传递给内部指令？

我已经尝试在外部指令中广播更改并在内部指令中监听它，但这似乎不起作用。

我已经尝试在内部指令中要求外部指令 - 我可以在那里看到切换的值，但是没有看到一种方法来观察它的变化。

这里是来自外部指令的链接函数：

link: function($scope, $element, $attrs){
  var menuCollapsed = true;
  $scope.toggleMenu = function(){
    menuCollapsed = !menuCollapsed;
    console.log("ToggleMenu",menuCollapsed);
    $scope.$broadcast('menuCollapsed', menuCollapsed);
  };
}

并且内部指令包含：

link: function($scope, $element, $attrs, widgetCtrl){
  $scope.$on('menuCollapsed', function(event, args){
    console.log('menuCollapsed', event, args);
  });

显示外部指令中的日志，但不显示内部指令中的日志。

Answer 1

如果你使用scope.emit，如果使用scope.broadcast，事件将会冒出来，事件将在你的树下广播。如果你的孩子指令是你父母指令范围的直接孩子，我会更喜欢事件而非观察者，你可以在孩子的dierctive属性中使用标准数据绑定。要在子指令中要求父指令，父指令必须通过其控制器函数公开其API。这些是更详细帮助的提示，我需要看一些代码

如何将更新的值传递给AngularJS中的嵌套指令？

1 个答案: