为什么我的指令的$ parent范围没有设置为父指令？

Question

我有一个简单的场景

<thead grid-columns pager-info="pagerInfo" onsort="onSort()"> 
    <tr> 
     <th width="15%"><column sortby='FName'>Name</column></th> 
     <th width="17%"><column sortby='Mobile'>Number</column></th> 
    </tr> 
</thead> 

的想法是，因为我所有的列都需要定义一个onsort，我就可以把它定义一次父。

但是，为什么我的孩子指令（列）没有将它的$parent设置为grid-columns指令？相反，scope.$parent设置为控制器作用域，所以我无法解决如何从我的子指令访问我的父指令作用域。

这两个指令有一个孤立的范围，我的孩子指令transcludes：

ngApp.directive('gridColumns', function() { 
    // Attribute-based wrapper round the columns that allows us to capture the pagerInfo and set a sort handler. 
    return { 
     restrict: 'A', 
     scope: { 
      pagerInfo: '=', 
      onsort: '=' 
     } 
    }; 
}); 

ngApp.directive('column', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: { 
      sortby: '@' 
     }, 
     template: "<span><a ng-click='sort()' ... </span>", 
     link: function (scope, el, attrs) { 
      scope.sort = function() { 

       // I want to call scope.$parent.onsort, but scope.$parent is the controller ! 

       // scope.$parent.onsort(scope.sortby); 
      }; 
     } 
    }; 

}); 

Answer 1

你可以尝试require：

ngApp.directive('column', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: { 
      sortby: '@' 
     }, 
     template: "<span><a ng-click='sort()' ... </span>", 
     require:"^gridColumns", 
     link: function (scope, el, attrs,gridColumnsController) {//inject gridColumnsController 
      scope.sort = function() { 
       gridColumnsController.onsort(scope.sortby);//call the controller's onsort function. 
      }; 
     } 
    }; 

}); 

更新您的gridColumns揭露onsort：

ngApp.directive('gridColumns', function() { 

    return { 
     restrict: 'A', 
     scope: { 
      pagerInfo: '=', 
      onsort: '&' //also update the function binding 
     }, 
     controller:function($scope){ 
      this.onsort = function (sortBy){ 
       $scope.onsort({param:sortBy}); 
      } 
     } 
    }; 
}); 

您的HTML：

<thead grid-columns pager-info="pagerInfo" onsort="onSort(param)"> 

你可以在这个拥有更多的信息：AngularJS - $emit only works within it's current scope?