Question

我正在使用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的上下文中使用caller或updateUserData或类似内容吗？

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

之类的东西

Answer 1

通过设计没有（简单）方法来做到这一点。 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操作应该是最后的手段。

Answer 2

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

如果您只需要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);
};

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

如何获取触发ng-change的DOM元素？

2 个答案: