从指令访问控制器范围 [英] Access controller scope from directive

问题描述

我创建了一个简单的指令，显示排序列标题为＆LT;表＆gt; 我创建

I've created a simple directive that displays sort column headers for a <table> I'm creating.

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);
            };
        }
    };
});

下面是创建一些表头的一个例子：

Here's an example of some table headers being created:

<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 ..但我坚持！到目前为止，我已经能够做到这一点的唯一方法是让每个＆LT;排序列＆GT; 上，添加的onSort属性，并引用那些在该指令：

So when the sort column is clicked I want to fire the onControllerSort function on my grid controller.. but I'm stuck! So far the only way I've been able to do this is for each <sort-column>, add attributes for the "onSort" and reference those in the directive:

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

但是，这不是很好，因为我一直想打电话给controllerOnSort，所以水暖它为每一个指令是有点难看。我怎样才能在指令中做到这一点没有在我需要的HTML标记unnecesary？这两个指令和控制器在同一模块中定义是否有帮助。

But that's not very nice since I ALWAYS want to call controllerOnSort, so plumbing it in for every directive is a bit ugly. How can I do this within the directive without requiring unnecesary markup in my HTML? Both the directive and controller are defined within the same module if that helps.

推荐答案

创建第二个指令作为包装：

Create a second directive as a wrapper:

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

然后，你可以参考该函数在外部指令调用一次：

Then you can just reference the function to call once in the outer directive:

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

在sortColumn指令则可以通过调用调用该函数引用

In the "sortColumn" directive you can then call that referenced function by calling

scope.$parent.onsort();

请参阅此捣鼓工作示例： http://jsfiddle.net/wZrjQ/1/

See this fiddle for a working example: http://jsfiddle.net/wZrjQ/1/

当然，如果你不关心有难codeD的依赖，还可以留一个指令，并通过刚刚

Of course if you don't care about having hardcoded dependencies, you could also stay with one directive and just call the function on the parent scope (that would then be the controller in question) through

scope.$parent.controllerOnSort():

我有示出了另一小提琴这样的： http://jsfiddle.net/wZrjQ/2

此溶液将具有相同的效果（与关于硬耦合相同批评）如在其它应答的溶液（ http://stackoverflow.com/a/19385937/2572897 ），但是至少比溶液比较容易。如果夫妻辛苦，无论如何，我不认为这是在引用控制器，因为它最有可能是可在$范围。$母公司所有的时间（但其他元素设置一个范围，谨防）的一个点。

This solution would have the same effect (with the same criticism in regard to hard-coupling) as the solution in the other answer (http://stackoverflow.com/a/19385937/2572897) but is at least somewhat easier than that solution. If you couple hard anyway, i don't think there is a point in referencing the controller as it would most likely be available at $scope.$parent all the time (but beware of other elements setting up a scope).

我会去的第一个解决方案，但。它增加了一些小的标记，但解决问题并维护​​一个干净的分离。你也可以确保$范围。$家长，如果你使用第二个指令作为直接包装外指令相匹配。

I would go for the first solution, though. It adds some little markup but solves the problem and maintains a clean separation. Also you could be sure that $scope.$parent matches the outer directive if you use the second directive as a direct wrapper.

这篇关于从指令访问控制器范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！