Как получить элемент DOM, вызвавший ng-change?

Я использую angularJS. У меня есть несколько элементов <select> на моей странице, каждый со своим ng-change, например:

Я хочу, чтобы определить, какой элемент DOM обновлен из функции updateUserData, без необходимости вручную указывать его как параметр для каждого атрибута ng-change.

Есть ли event или caller или что-то подобное, что я могу использовать в контексте updateUserData?

Ответы

Ответ 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, вы можете сделать это, написав специальную директиву. В общем, прямая манипуляция DOM в Angular должна быть последним видом меры, хотя.

Ответ 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);
};

(Для тех, кто задается вопросом, я делаю все возможное, чтобы преобразовать старый код, который "волшебным образом" сохраняет пользовательские настройки на страницах по всему веб-сайту.)