AngularJS隔离范围如何添加到正确的父范围?

时间:2014-07-01 21:42:57

标签: angularjs angularjs-directive angularjs-scope

我有一个指令' outerDirective',它有孩子是指令,他们有孩子是指令。如何将孙子指令范围添加到正确的子指令范围?我希望这是有道理的。这是一个显示代码的小提琴。看起来我需要与子指令中的scope方法而不是控制器实例进行通信。 http://jsfiddle.net/hcabnettek/DMhUL/ html就是这样的

<div class="my-outer-directive">

    <div class="my-inner-directive" id="foo1">

        <div class="my-inner-inner-directive"></div>
        <div class="my-inner-inner-directive"></div>
    </div>
    <div class="my-inner-directive" id="foo2"></div>
    <div class="my-inner-directive" id="foo3">
       <div class="my-inner-inner-directive"></div>
       <div class="my-inner-inner-directive"></div>
       <div class="my-inner-inner-directive"></div>
       <div class="my-inner-inner-directive"></div>
   </div>

我期待foo1范围,拥有一个包含2个范围的订阅属性 foo2作用域,具有0作用域的预订属性和foo3具有4个作用域的预订属性。我相信它们都被添加到单例控制器实例中。如何将内部内部指令链接到适当的范围。像嵌套手风琴一样的东西。任何帮助都会很棒。

1 个答案:

答案 0 :(得分:0)

子指令至少有两种与父母交流的方式:

使用指令配置对象上的require属性来访问子指令内的父指令控制器,如下所示:

.directive('parent', function() {

  return {
    controller: function() {  
      this.parentFn() {
        //do stuff.
      }
    } 
  }
})

.directive('child', function() {

  return {
    require: '^parent',
    link: function(scope, element, attrs, parentCtrl) {
        parentCtrl.parentFn(); //this will execute the parent function here
    }
  }
});

或者,将一个函数传递给模板中的child指令,如下所示

<child parent-fn=parentFn()></child>

.directive('child', function() {

  return {
    scope: {
      parentFn: '&' // this function is now available on child's scope
    }
  }
});

通过这种方式,不是直接访问其子级的父级,而是获得访问某些父级方法的子级,希望有所帮助。