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

【问题标题】：How to pass an updated value to a nested directive in AngularJS?如何将更新的值传递给 AngularJS 中的嵌套指令？
【发布时间】：2014-07-04 00:00:41
【问题描述】：

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

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

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

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

如何将切换值的变化从外部指令传递到内部指令？

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

我尝试在内部指令中要求外部指令 - 我可以在那里看到切换的值，但看不到观察它的变化的方法。

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

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

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

【问题讨论】：

请提供小提琴或 plunkr

标签： javascript angularjs

【解决方案1】：

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

【讨论】：

我正在使用 scope.$emit 在两个指令中成功冒泡，但 $broadcast 似乎没有冒泡。我在内部指令中没有范围定义。是否需要在外部指令的范围内包含一些内容才能使其正常工作？
所以你的内部指令不会生成一个孤立的范围？如果是这种情况，这意味着您使用与父指令相同的范围，因此您手头有其所有范围变量，那么您需要使用 scope.$watch('variableName') 设置一个观察者。如果您正在寻找原始值，如果您正在监视一个对象，则此方法有效，它仅在对象更改其地址时才有效，因此您必须使用一个函数来验证您要检查的对象属性。
我试过了：outer: $scope.menuCollapsed = true; $scope.toggleMenu = function(){ $scope.menuCollapsed = !$scope.menuCollapsed; console.log("ToggleMenu",$scope.menuCollapsed); };内部：$scope.$watch('menuCollapsed', function(newVal, oldVal){ console.log('menuCollapsed', newVal, oldVal); });结果相同
顺便说一句，我认为 scope.$watchCollection 会监视整个对象
也许，我真的不喜欢看整个物体。是的，这不起作用尝试使用 scope.watch(function(){return scope.menuCollapsed}),function(val1,val2){});