Question

我需要编写一个指令，它像控制器一样设置范围。里面有输入和按钮。当某个按钮单击时，它会调用$ scope.refresh（），它会将模型值传递给某些网格以使其刷新。

大多数事情都很好。我将模型绑定到内部输入，使用ng-click绑定按钮单击事件，它调用refresh（）方法。但是在刷新函数中，我需要获取数据表的id并与之交互。现在我只能通过ng-click的方法参数传递它。代码如下：

<div ng-controller="MyController">
    <input ng-model="year"/>
    ........
    <button ng-click="refresh('grid1, grid2')">Refresh</button>
    <button ng-click="reset()">Reset</button>
</div>

我觉得它看起来很难看。如果网格ID需要在其他方法中重用，我必须多次传递，但我不知道如何将attr传递给控制器或扩展Controller。有没有一种很好的方法来实现这样的目标？

<div my-controller="MyController" grids='grid1, grid2' charts='chart1,chart2' ...>
    <input ng-model="year"/>
    ......
    <button ng-click="refresh()">Refresh</button>
    <button ng-click="reset()">Reset</button>
</div>

或许这个想法很糟糕。我应该更好地使用其他方式来完成这项工作吗？

更新：

用例是这样的：

我需要创建一个可重用的组件，其中包含一些输入（我猜是通过翻译）作为查询。该组件与一些外部网格和图表绑定（不幸的是它们还没有指令）。组件中有按钮，使用ng-click触发refreshGrids或refreshCharts操作。它需要grid和chart id在action中调用它们的setQuery（）方法，并将模型（输入值）传递给方法。这就是我需要将id传递给组件或操作的原因。

我使用ng-controller的原因是为隔离创建一个新的范围。

Answer 1

我认为这种方法很好，但如果你想将网格重构为自己的指令，你可以通过link function中的'element'变量访问DOM元素。

如果您需要根据ng-click指令执行某些操作，则可以在指令中查看范围变量，或者在根范围内侦听广播并在指令本身中执行操作。像这样：

<div id="dataGrid1" my-app-directive="fireACtion" ng-click="fireAction = !fireAction" />

然后在你的指令中只注意attrs.myAppDirective（这是fireAction）

scope.$watch(attrs.myAppDirective , function (newVal, oldVal) {
     //When the value changes, this will run
}

这将在指令中封装所有这些逻辑，您还将继承控制器范围。

Answer 2

得到了解决方案。

在深入研究Angular UI的源代码后，我发现datepicker使用一种方法将控制器和链接指令包含在其中。

检查以下代码行：https://github.com/angular-ui/bootstrap/blob/master/src/datepicker/datepicker.js#L135

如何向Controller添加属性或以Angular自定义Controller

2 个答案: