javascript 如何获取触发 ng-change 的 DOM 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17007986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the DOM element that triggered ng-change?
提问by OpherV
I'm using angularJS. I have a few <select>elements on my page, each with its own ng-change, for example:
我正在使用 angularJS。我的<select>页面上有一些元素，每个元素都有自己的ng-change，例如：
<select id="hairColorComponent" ng-model="hairColor"
ng-options="option.name for option in hairColorData"
ng-change="updateUserData()">
I want to be able to determine which DOM element got updated from within the updateUserDatafunction, without having to manually specify it as a parameter for each ng-changeattribute.
我希望能够确定从updateUserData函数内部更新了哪个 DOM 元素，而不必手动将其指定为每个ng-change属性的参数。
Is there an event, or calleror something similar that I can use within the context of updateUserData?
是否有一个event或caller或类似的东西，我可以的范围内使用updateUserData？
Hopefully something like ng-change="updateUserData(caller)"
希望像 ng-change="updateUserData(caller)"
回答by mikel
There's no (easy) way to do this by design. Angular controllers are supposed to be completely separate of the DOM, so if you find yourself needing to reference the DOM in them you're probably approaching things the wrong way.
设计上没有（简单的）方法可以做到这一点。Angular 控制器应该与 DOM 完全分离，因此如果您发现自己需要在其中引用 DOM，那么您可能会以错误的方式处理事情。
If your HTML is
如果您的 HTML 是
<select id="hairColorComponent" ng-model="hairColor"
ng-options="option.name for option in hairColorData"
ng-change="updateUserData()">
Then changing the select will change the value of $scope.hairColorin your controller. In updateUserData()just read its value and act accordingly.
然后更改选择将更改$scope.hairColor控制器中的值。在updateUserData()刚读它的价值和采取相应的行动。
If in your situation there's really no way to do it except referencing the DOM, you could do it by writing a custom directive. In general, direct DOM manipulation in Angular should be a last resort kind of measure though.
如果在您的情况下，除了引用 DOM 之外真的别无他法，您可以通过编写自定义指令来实现。一般来说，Angular 中的直接 DOM 操作应该是最后的手段。
回答by Loren
Found this on google, I eventually solved my problem so here's my solution.
在谷歌上找到了这个，我最终解决了我的问题，所以这是我的解决方案。
If you just need the ID, you could always just pass that as a parameter.
如果您只需要 ID，您可以随时将其作为参数传递。
<select id="hairColorComponent" ng-model="hairColor"
ng-options="option.name for option in hairColorData"
ng-change="updateUserData('hairColorComponent')">
Still not super clean, but it solved my problem. Since I actually needed the dom element, I then used jQuery to get the element.
仍然不是超级干净，但它解决了我的问题。由于我实际上需要 dom 元素，因此我使用 jQuery 来获取该元素。
$scope.updateUserData = function (id) {
var element = jQuery('#'+id);
};
(For those wondering, I'm doing my best with converting legacy code that "magically" saves user settings on pages all over the website.)
（对于那些想知道的人，我正在尽最大努力转换遗留代码，这些代码“神奇地”在整个网站的页面上保存用户设置。）
