angularjs – 从指令访问控制器范围

前端之家收集整理的这篇文章主要介绍了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中不必要的标记?如果有帮助,则指令和控制器都在同一模块内定义。

创建第二个指令作为包装:
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

这个解决方案将具有与其他答案(http://stackoverflow.com/a/19385937/2572897)中的解决方案相同的效果(与硬耦合相同的批评),但至少比该解决方案更容易一些。如果你还是努力工作,我不认为在引用控制器时有一点,因为它最有可能在$ scope。$ parent的时候(但要注意其他元素设置一个范围)。

我会去找第一个解决方案。它增加了一些小的标记,但解决了问题,并保持一个干净的分离。另外,如果使用第二个指令作为直接包装,那么您可以确保$ scope。$ parent与外部指令匹配。

原文链接:https://www.f2er.com/angularjs/144486.html

猜你在找的Angularjs相关文章