指令的访问控制器范围

一尘不染

指令的访问控制器范围

angularjs

我创建了一个简单的指令，该指令显示<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>

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

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

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

阅读 218

2020-07-04

共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();

有关工作示例，请参见此提琴：http :
//jsfiddle.net/wZrjQ/1/

当然，如果您不关心硬编码的依赖项，也可以只使用一个指令，而只需在父作用域（然后是有问题的控制器）上调用函数即可，

scope.$parent.controllerOnSort():

我还有另一个小提琴显示此内容：http :
//jsfiddle.net/wZrjQ/2

此解决方案与其他答案）的解决方案具有相同的效果（对硬耦合有相同的批评），但至少比该解决方案更容易。如果无论如何您都很难相处，我认为引用控制器没有意义，因为它很可能一直在$scope。$ parent中可用（但要注意设置范围的其他元素）。

不过，我会寻求第一个解决方案。它增加了一些标记，但解决了问题并保持了清晰的分隔。另外，如果将第二个指令用作直接包装器，则可以确保$ scope。$parent与外部指令匹配。

2020-07-04