angularjs - 从指令访问 Controller 范围

Question

我创建了一个简单的指令，用于显示 <table> 的排序列标题我正在创作。

ngGrid.directive("sortColumn", function() {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {
            sortby: "@",
            onsort: "="
        },
        template: "<span><a href='#' ng-click='sort()' ng-transclude></a></span>",
        link: function(scope, element, attrs) {
            scope.sort = function () {

                // I want to call CONTROLLER.onSort here, but how do I access the controller scope?...
                scope.controllerOnSort(scope.sortby);
            };
        }
    };
});

以下是创建一些表格标题的示例:

<table id="mainGrid" ng-controller="GridCtrl>
<thead>
    <tr>
        <th><sort-column sortby="Name">Name</sort-column></th>
        <th><sort-column sortby="DateCreated">Date Created</sort-column></th>
        <th>Hi</th>
    </tr>
</thead>

因此，当单击排序列时，我想在网格 Controller 上触发 onControllerSort 函数..但我被卡住了!到目前为止，我能够做到这一点的唯一方法是针对每个 <sort-column> ，添加“onSort”属性并在指令中引用这些属性:

<sort-column onSort="controllerOnSort" sortby="Name">Name</sort-column>

但这不太好，因为我总是想调用controllerOnSort，所以为每个指令插入它有点难看。如何在指令中执行此操作，而不需要在 HTML 中添加不必要的标记？如果有帮助的话，指令和 Controller 都在同一模块中定义。

Answer 1

创建第二个指令作为包装器:

ngGrid.directive("columnwrapper", function() {
  return {
    restrict: "E",
    scope: {
      onsort: '='
    }
  };
});

然后您可以在外部指令中引用要调用一次的函数:

<columnwrapper onsort="controllerOnSort">
  <sort-column sortby="Name">Name</sort-column>
  <sort-column sortby="DateCreated">Date Created</sort-column>
</columnwrapper>

在“sortColumn”指令中，您可以通过调用来调用引用的函数

scope.$parent.onsort();

请参阅此 fiddle 的工作示例:http://jsfiddle.net/wZrjQ/1/

当然，如果您不关心硬编码的依赖关系，您也可以保留一个指令，只通过

调用父作用域(即有问题的 Controller )上的函数

scope.$parent.controllerOnSort():

我有另一个 fiddle 显示这个:http://jsfiddle.net/wZrjQ/2

此解决方案与其他答案 ( https://stackoverflow.com/a/19385937/2572897 ) 中的解决方案具有相同的效果(在硬耦合方面具有相同的批评)，但至少比该解决方案更容易一些。如果你无论如何都很难耦合，我认为引用 Controller 没有意义，因为它很可能始终在 $scope.$parent 中可用(但要注意设置范围的其他元素)。

不过，我会选择第一个解决方案。它添加了一些小标记，但解决了问题并保持了干净的分离。另外，如果您使用第二个指令作为直接包装器，则可以确保 $scope.$parent 与外部指令匹配。