13

我正在使用 angularJS。我的页面上有一些<select>元素，每个元素都有自己的ng-change，例如：

<select id="hairColorComponent" ng-model="hairColor"
        ng-options="option.name for option in hairColorData"
        ng-change="updateUserData()">

我希望能够确定从updateUserData函数中更新了哪个 DOM 元素，而不必手动将其指定为每个ng-change属性的参数。

我可以在 的上下文中使用 或类似的event东西吗？callerupdateUserData

希望像ng-change="updateUserData(caller)"

4

2 回答 2

11

通过设计没有（简单的）方法可以做到这一点。Angular 控制器应该与 DOM 完全分离，因此如果您发现自己需要在其中引用 DOM，那么您可能会以错误的方式处理事情。

如果您的 HTML 是

<select id="hairColorComponent" ng-model="hairColor"
        ng-options="option.name for option in hairColorData"
        ng-change="updateUserData()">

然后更改选择将更改$scope.hairColor控制器中的值。updateUserData()只需阅读它的价值并采取相应的行动。

如果在您的情况下除了引用 DOM 之外确实没有其他方法，您可以通过编写自定义指令来实现。一般来说，Angular 中的直接 DOM 操作应该是最后的手段。

于 2013-06-09T09:08:25.057 回答
2

在谷歌上找到了这个，我最终解决了我的问题，所以这是我的解决方案。

如果您只需要 ID，则始终可以将其作为参数传递。

<select id="hairColorComponent" ng-model="hairColor"
        ng-options="option.name for option in hairColorData" 
        ng-change="updateUserData('hairColorComponent')">

仍然不是超级干净，但它解决了我的问题。由于我实际上需要 dom 元素，因此我使用 jQuery 来获取该元素。

$scope.updateUserData = function (id) {
    var element = jQuery('#'+id);
};

（对于那些想知道的人，我正在尽最大努力转换“神奇地”保存整个网站页面上的用户设置的遗留代码。）

于 2016-02-11T18:15:35.930 回答