爲什麼我的指令的$ 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?