0

我需要编写一个指令，像控制器一样在其中设置范围。它里面有输入和按钮。当某个按钮单击时，它会调用 $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>

我觉得它看起来很丑。如果grid ids需要在其他方法中重用，我要传很多次，但是不知道怎么把attr传给controller或者扩展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 操作。它需要网格和图表 ID 在操作中调用它们的 setQuery() 方法并将模型（输入值）传递给该方法。这就是为什么我需要将 id 传递给组件或操作。

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

4

2 回答 2

0

我认为这种方法很好，但是如果您想将网格重构为它们自己的指令，则可以通过链接函数中的“元素”变量访问 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
}

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

于 2013-08-19T14:02:37.360 回答
0

得到了解决方案。

在深入研究 Angular UI 的源代码后，我发现 datepicker 使用了一种方法来封装控制器并将指令链接到它。

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

于 2013-09-26T03:40:07.200 回答