子指令不能訪問父控制器

Question

我有2個指令創建一個網格表。 對於每一行我們可能有一些操作，我的問題是我可以以某種方式訪問​​這些操作，而無需調用$ parent。$ parent.action在我的模板中？

  .directive("grid", function ($compile, $parse) { 
      return { 
       restrict: 'AE', 
       scope: { 
        templateUrl   : '@?', 
        columns    : '=', 
        filterBy   : '=?', 
        excludeSortColumns : '=?' 
       }, 
       controller: GridController, 
       controllerAs: 'grid', 
       bindToController: true, 
       replace: true, 
       transclude: true, 
       templateUrl: function($element, $attrs) { 
        if(!angular.isDefined($attrs.filterBy)) { 
         return '/assets/js/src/templates/partials/grid/grid-sortable.tpl.html'; 
        } 
        return $attrs.templateUrl || '/assets/js/src/templates/partials/grid/grid.tpl.html'; 
       }, 
       link: function($scope, $element, $attrs, ctrl, transclude) { 
        //filter collection when user has typed some letter 
        $element.on('keyup', function() { 
         $scope.$apply(function() { 
          $scope.$parent.filterValue = $('.filterBy').val(); 
         }); 
        }); 
        //var e = $compile(transclude())($scope.$parent); 
        //angular.element('.table').append(e); 
        $element.append(transclude($scope.$parent)); 
       } 
      }; 

      function GridController($scope, $element, $attrs) { 
       var vm = this; 

       vm.columns = $parse($attrs.columns)($scope.$parent); 
       vm.excludeSortColumns = angular.isDefined($attrs.excludeSortColumns) ? $parse($attrs.excludeSortColumns)($scope.$parent) : false; 
       vm.filterCol = angular.isDefined($attrs.filterBy) ? $parse($attrs.filterBy)($scope.$parent) : false; 

       vm.sortBy = function(column) { 
        if(!vm.isExludedSortBy(column)) { 
         vm.predicate = column; 
         vm.reverse = (vm.predicate === column) ? !vm.reverse : false; 
         var sortType = (vm.reverse) ? '-' : '+'; 
         $scope.$parent.orderByColumn = sortType + column; 
        } 
       }; 

       vm.isExludedSortBy = function(column) { 
        if(!vm.excludeSortColumns) { 
         return true; 
        } 
        if(vm.excludeSortColumns.indexOf(column) >= 0) { 
         return true; 
        } 
        return false; 
       }; 
      }; 
     }) 

     .directive("gridBody", function ($parse) { 
      return { 
       restrict: 'AE', 
       scope: { 
        templateUrl   : '@?', 
        collection   : '=' 
       }, 
       require: '^grid', 
       controller: function($scope, $element, $attrs) { 
        var vm = this; 
        vm.collection = $parse($attrs.collection)($scope.$parent); 
       }, 
       controllerAs: 'body', 
       bindToController: true, 
       replace: true, 
       transclude: false, 
       templateUrl: function($element, $attrs) { 
        return $attrs.templateUrl || '/assets/js/src/templates/partials/grid/grid-body.tpl.html'; 
       } 
      }; 
     }) 

這是一個模板：

<tbody> 
 
    <tr ng-repeat="item in body.collection | gridFilterBy:$parent.filterBy:$parent.filterValue | orderBy:$parent.orderByColumn track by $index"> 
 
     <td class="col-sm-1">{{item.id}}</td> 
 
     <td class="col-sm-2">{{item.name}}</td> 
 
     <td class="col-sm-1">{{item.latest_result.count}}</td> 
 
     <td class="col-sm-2">{{item.created_at}}</td> 
 
     <td class="col-sm-2">{{item.updated_at}}</td> 
 
     <td class="col-sm-4"> 
 
      <button class="btn btn-primary" ng-disabled="item.has_cluster" role="button" ng-click="$parent.$parent.addCluster(item.id)"> 
 
       Crea cluster 
 
      </button> 
 
      <button class="btn btn-primary" role="button" ng-click="$parent.getExports(item.id, item.name)"> 
 
       Export 
 
      </button> 
 
      <button class="btn btn-primary" role="button" ng-click="$parent.$parent.loadQuery(item.id)"> 
 
       Visualizza 
 
      </button> 
 
      <button class="btn btn-primary" role="button" ng-click="$parent.$parent.removeQuery(item.id)"> 
 
       Rimuovi 
 
      </button> 
 
     </td> 
 
    </tr> 
 
</tbody>

  <grid columns="columns" filter-by="filterBy" exclude-sort-columns="excludeColumns"> 
      <grid-body collection="result.items" template-url="/assets/js/src/templates/partials/grid/grid-body.tpl.html"></grid-body> 
     </grid> 

我不能讓網格控制器

感謝所有的答覆。

Answer 1

通常這是通過指令控制器完成的。下面是建立父母與子女指令控制器必須知道對方的一個例子：

app.directive('parentDir', function() { 
    return { 
    restrict: 'A', 
    controller: function($scope, $element, $attrs) { 
     this.parentInit = function(ctrl) { 
     console.log(ctrl); 
     }; 

     this.parentClick = function(param) { 

     }; 
    }, 
    link: function(scope, element, attrs) { 

    } 
    } 
}); 

app.directive('childDir', function() { 
    return { 
    restrict: 'A', 
    require: ['childDir', '^parentDir'], 
    controller: function($scope, $element, $attrs) { 
     var parentCtrl; 
     this.childInit = function(parentCtrl) { 
     console.log(parentCtrl); 
     parentCtrl = ctrl; 
     }; 

     $scope.childClick = function(param) { 
     parentCtrl.parentClick(param); 
     }; 
    }, 
    link: function(scope, element, attrs, ctrls) { 
     ctrls[0].childInit(ctrls[1]); 
     ctrls[1].parentInit(ctrls[0]); 
    } 
    } 
}); 

這裏是一個plunk與演示。