个人中心
gpt4 book ai didi

angularjs - 嵌套指令之间的通信

转载 作者：行者123 更新时间：2023-12-03 18:37:19 25 4
gpt4 key购买 nike

我正在尝试在父指令与其嵌套的子指令之间进行通信，反之亦然。我已经设法通过使用 $broadcast 和 $emit 来实现这一点，但是因为我将一些参数传递给指令，所以我必须在我的指令上创建隔离范围，所以为了让 $broadcast/$emit工作我必须在父范围(scope.$parent.$broadcast)上广播“上一级”。
现在广播不再只是去嵌套的 child ，而是去同一级别的所有指令，这是我不想要的。我创建了一个 plunker 来显示问题，here .
我需要的是当按下其中一个按钮时，只有子指令接收广播消息，反之亦然。我是否遗漏了什么，或者在使用隔离范围时这是不可能的？

在我的 HTML 中:

<body ng-app="myApp">
  <directive1 data-title="Click me to change name">
    <directive2 data-name="John Smith"></directive2>
  </directive1>

  <directive1 data-title="Click me to change this other name">
    <directive2 data-name="Gordon Freeman"></directive2>
  </directive1>
</body>

指令 1: 
<div>
  <button ng-click="changeName()">{{title}}</button>
  <div ng-transclude></div>
</div>

指令 2: 
<div>
  <h2>{{name}}</h2>
</div>

我的指示: 
myApp.directive('directive1', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'Directive1.html',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, elem){
      scope.changeName = function() {
        scope.$parent.$broadcast('ChangeName');
      };

      scope.$parent.$on('NameChanged', function(event, args){
        scope.title = 'Name changed to ' + args;
      });
    }
  }
});


myApp.directive('directive2', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'Directive2.html',
    scope: {
      name: '@'
    },
    link: function(scope, elem){
      scope.$on('ChangeName', function(event, args){
        scope.name = 'Adam West';

        scope.$emit('NameChanged', 'Adam West');
      });
    }
  }
});

最佳答案

指令之间有 5 种主要的通信方式:

1) 共同服务。

这对您来说不是一个好的解决方案，因为服务始终是单例的，并且您希望拥有多个唯一的指令。如果您在服务中维护 parent 和 child 的字典并管理将调用路由到正确的关联 parent / child ，您只能使用服务，这与您使用事件时遇到的问题相同。

2) 事件。

如果您无法通过从正确节点广播将事件限制在 DOM/树的正确部分，则必须为事件添加唯一标识符。在这种情况下，如果您从根广播和/或多个 child 正在接收消息，请给每个 parent / child 一个唯一的标识符，并将其添加到发射/广播/上。这不是一个很好的解决方案，但它会起作用。

3) 单向绑定(bind)。

隔离范围内的“&”绑定(bind)允许您将父函数传递给子函数。然后子级可以在父级范围上调用这些函数来通知父级更改。这对于 child 与 parent 的交流非常有用，但不会反过来。您可以将此解决方案与广播来自 parent 的事件结合起来与 child 交流。

4) 双向绑定(bind)。

有时您可以使用隔离范围上的属性在父子之间传递信息或标志。这在您的示例中不起作用，因为 parent 对他的 child 一无所知，因为 child 是通过嵌入注入(inject)的。

5) require父 Controller 。

指令可以使用 require属性来指定另一个指令必须作为父元素存在或存在于同一元素上。您不能要求同级指令。必需的指令必须定义 Controller 。然后将 Controller 传递给链接(或编译)函数，您可以调用 Controller 上的函数。这可用于允许指令之间的通信。在您的示例中，如果directive2 需要directive1，您可以设置addChild() 之类的函数到 Controller 。然后， child (directive2)会将自己添加到可以在调用 changeName 时更新/调用所有 child 的 parent 。

myApp.directive('directive1', function(){
  return {
    // ...
    controller: function($scope) {
      $scope.children = [];
      this.addChild = function(child) {
        $scope.children.push(child);
      }
    },
    link: function(scope, elem){
      scope.changeName = function() {
        _.each(scope.children, function(child) {
          child.setName('Adam West');
        };
      };
    },
  }
});


myApp.directive('directive2', function(){
  return {
    // ...
    require: "^directive1", // require directive1 as a parent or on same element
    link: function(scope, elem, attributes, directive1Controller){
      child = {
        setName: function(name) {
          scope.name = name;
        },
      };

      directive1Controller.addChild(child);
    }
  }
});

关于angularjs - 嵌套指令之间的通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22906911/

25 4 0
文章推荐： asp.net-mvc - 在 Razor View 中重命名 mvc 模型对象
文章推荐： asp.net-core - 在不阻塞 UI 的情况下延迟 Blazor 中的任务
文章推荐： delphi - FireDAC:阵列DML进展
文章推荐： json - 如何修复 `` `ValueError : Trailing data ``` during `` `pandas. read_json(... )`` `？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com