Angular指令获得不同的父级

Question

我有一个调用指令两次的页面

<div>
  <my-directive attr="attr1" attrSib="attr2"></my-directive>
  <my-directive attr="attr2" attrSib="attr1"></my-directive>
</div>

我希望两者互相沟通，所以我尝试使用父作用域来设置一个函数，作为我的指令的例子

.directive('myDirective', function(_) {
return {
  restrict: 'E',
  templateUrl: 'template.html',
  controller: 'directiveController',
  controllerAs: 'ctrl',
  scope: {
    attr: '=',
    attrSib: '='
  },

};

directiveController就好

var siblingName = vm.selfName + attrSib;
$scope.parent[selfName + attr] = function(){...};
....
/*on event*/$scope.parent[sibling]();

但是我注意到第一个指令有一个id为x的父作用域，而第二个指令有一个id为x + 1的作用域父，它是x的子...

我怎么能让两个人都拥有相同的父母？我不想使用rootScope广播。

Answer 1

如果你按照我在评论中所说的添加新属性，你会将所有指令彼此分开，在这里我添加parent，这样你就可以从一个父母那里轻松地用attr或sibling调用parent。

<div>
  <my-directive parent="iParent" attr="attr1" sibling="attr2"></my-directive>
  <my-directive parent="iParent" attr="attr2" sibling="attr1"></my-directive>
</div>

$scope[parent][sibling]();

例如

var app = angular.module("app", []);

app.controller("ctrl", function($scope){
  $scope.parent = [
      {name: "A"},
      {name: "B"}
  ]
  
    $scope.parent2 = [
      {name: "C"},
      {name: "D"}
  ]
})

app.directive("myDirective", function(){
  return {
    template: "<p>you call {{node.name}}</p>",
    scope: {
      index: "=",
      parent: "="
    },
    link: function(scope){
       scope.node = scope.parent[scope.index];
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <h3>parent 1 </h3>

    <div my-directive parent="parent" index="0"></div>
    <div my-directive parent="parent" index="1"></div>
    
    <h3>parent 2 </h3>
    <div my-directive parent="parent2" index="0"></div>
    <div my-directive parent="parent2" index="1"></div>

</div>