与兄弟指令沟通 [英] Communicating with sibling directives

问题描述

目标：创建使用指令有2个兄弟元素（每一个自己的指令）之间的通信行为

一个行为，例如使用：文章内容默认是隐藏的。当点击标题，我想相关的文章内容可以显示。

美中不足的是：。相关文章元素需要关联到对方而不被嵌套在一个单亲元素或指令

 ＆LT; div文章=第一条＆gt;这是我的头＆LT; / DIV＆GT;
＆LT; D​​IV ID =第一条文章内容＆gt;这是上述＆lt头内容; / DIV＆GT;＆LT; div文章=第二条＆gt;这是我的头＆LT; / DIV＆GT;
＆LT; D​​IV ID =第二条文章内容＆gt;这是上述＆lt头内容; / DIV＆GT;
 

我知道这将是更容易的文章指令里面的内容放，但是这个问题是要找出如何解决的情况是这样的。

内容指令可以通过本身以某种方式相关文章的指令？

这code不是非常有用，因为它现在是，但它是一个起点。我将如何做到这一点？

  .directive（'文章'，函数（）{
  返回{
    限制：A，
    控制器：函数（$范围）{
      $ scope.contentElement = NULL;
      this.setContentElement =功能（元素）{
        $ scope.contentElement =元素;
      }
    }，
    链接：功能（范围，元素）{
      element.bind（'点击'，功能（）{
        //显示属于文章内容指令
        //这个实例的指令（第一条）
      }
    }
  }
}
.directive（'articleContent'，函数（）{
  返回{
    要求：文章，
    链接：功能（范围，元素，ATTRS，articleCtrl）{
      //也许我引用属于文章，并指定元素呢？
      //我不能，虽然因为这些都是兄弟姐妹。
    }
  }
}
 

解决方案

指令要求选项将允许您需要的兄弟姐妹指令（据我所知）没有。您只能：

• 要求元素，使用要求：directiveName


• 告诉使用的角度向上搜索DOM树要求：^ directiveName


• 或要求：^ directiveName如果你并不一定需要父控制器


• 或要求：^ \\ directiveName如果你并不一定需要父DOM包装

如果你想兄弟姐妹兄弟沟通，你必须容纳它们与指令控制器作为其通信的API一些父DOM元素。这是如何实现的，在很大程度上取决于手边的上下文

下面是角JS一个很好的例子（O赖利）

  app.directive（'手风琴'，函数（）{
  返回{
    限制：EA，
    更换：真实，
    transclude：真实，
    模板：'＆LT; D​​IV CLASS =手风琴NG-transclude＆GT;＆LT; / DIV＆GT;，
    控制器：功能（）{      变种膨胀剂= [];      this.gotOpened =功能（selectedExpander）{
        angular.forEach（扩展，功能（扩展）{
          如果（selectedExpander！=扩展）{
            expander.showMe = FALSE;
          }
        }）;
      };      this.addExpander =功能（扩展）{
        expanders.push（扩展）;
      }    }
  }
}）;app.directive（'扩展'，函数（）{
  返回{
    限制：EA，
    更换：真实，
    transclude：真实，
    要求：'^手风琴，
    适用范围：{标题：@}，
    模板：'＆LT; D​​IV CLASS =膨胀＆GT; \\ n＆LT; D​​IV CLASS =头衔NG点击=切换（）＆GT;的{{title}}＆LT; / DIV＆GT; \\ n＆LT; D​​IV类=身体NG-秀=SHOWME\\ n NG-动画={显示：\\'动画flipInX \\'}\\ n NG-transclude＆GT;＆LT; / DIV＆GT; \\ n＆LT; / DIV＆GT;，
    链接：功能（范围，元素，ATTRS，accordionController）{
      scope.showMe = FALSE;
      accordionController.addExpander（范围）;      scope.toggle =功能切换（）{
        scope.showMe = scope.showMe！;
        accordionController.gotOpened（范围）;
      }
    }
  }
}）
 

使用（玉模板）：

 手风琴
    扩展（标题=扩展器），呜呼！你可以看到MME
    扩展（标题=隐藏）我藏！
    扩展（标题=停止工作）说真的，我要现在停止工作。
 

Goal: Create behaviors using directives with communication between 2 sibling elements (each their own directive).

A behavior to use in example: The article content is hidden by default. When the title is clicked, I want the related article content to display.

The catch: The related article elements need to associate to each other without being nested in a single parent element or directive.

<div article="article1">this is my header</div>
<div id="article1" article-content>this is content for the header above</div>

<div article="article2">this is my header</div>
<div id="article2" article-content>this is content for the header above</div>

I know it would be easier to place the content inside the article directive, however this question is to find out how to solve a situation like this.

Can the content directive pass itself to the related article directive somehow?

This code isn't very useful as it is now, but it's a starting point. How would I accomplish this?

.directive('article', function(){
  return {
    restrict: "A",
    controller: function($scope) {
      $scope.contentElement = null;
      this.setContentElement = function(element) {
        $scope.contentElement = element;
      }
    },
    link: function(scope, element) {
      element.bind('click', function(){
        // Show article-content directives that belong
        // to this instance (article1) of the directive
      }
    }
  }
}
.directive('articleContent', function(){
  return {
    require: "article",
    link: function(scope, element, attrs, articleCtrl) {
      // Maybe reference the article i belong to and assign element to it?
      // I can't though because these are siblings.
    }
  }
}

解决方案

None of the directive require options will allow you to require sibling directives (as far as I know). You can only:

• require on the element, using require: "directiveName"
• tell angular to search up the DOM tree using require: "^directiveName"
• or require: "^?directiveName" if you don't necessarily need the parent controller
• or require: "^\?directiveName" if you don't necessarily need the parent DOM wrapper

If you want sibling to sibling communication, you'll have to house them in some parent DOM element with a directive controller acting as an API for their communication. How this is implemented is largely dependent on the context at hand.

Here is a good example from Angular JS (O Reilly)

app.directive('accordion', function() {
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<div class="accordion" ng-transclude></div>',
    controller: function() {

      var expanders = [];

      this.gotOpened = function(selectedExpander) {
        angular.forEach(expanders, function(expander) {
          if(selectedExpander != expander) {
            expander.showMe = false;
          }
        });
      };

      this.addExpander = function(expander) {
        expanders.push(expander);
      }

    }
  }
});

app.directive('expander', function() {
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    require: '^?accordion',
    scope: { title:'@' },
    template: '<div class="expander">\n  <div class="title" ng-click="toggle()">{{ title }}</div>\n  <div class="body" ng-show="showMe" \n       ng-animate="{ show: \'animated flipInX\' }"\n ng-transclude></div>\n</div>',
    link: function(scope, element, attrs, accordionController) {
      scope.showMe = false;
      accordionController.addExpander(scope);

      scope.toggle = function toggle() {
        scope.showMe = !scope.showMe;
        accordionController.gotOpened(scope);
      }
    }
  }
})

Usage (jade templating):

accordion
    expander(title="An expander") Woohoo! You can see mme
    expander(title="Hidden") I was hidden!
    expander(title="Stop Work") Seriously, I am going to stop working now.

这篇关于与兄弟指令沟通的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！