Вызов ng-change через js

@sau · Регистрация: 22.07.2011

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
    <div ng-controller="MyTestCtrl">
        <input id="test" ng-model="ModelValue" ng-change="ControllerMethod()" />
        <input type="button" onclick="changeInputValue()" value="change me" /> 
        <script type="text/javascript">
            var changeInputValue= function () {
                var test = angular.element("#test");
                test.val("123");
                //Вызов метода в ручную , как то костыльно.
                var scope = test .scope(); 
                scope.ControllerMethod();
            }
        </script>
    </div>

Как правильно сделать , что бы при заполнении значений элементов через скрипт , срабатывал ng-change ?

Добавлено через 7 минут
Т.е , если скажем мы из скриптов за пределами контроллера меняем занчения модели , то там нужно вручную вызывать методы типа $apply() , $digest() и т.п , что бы обновить вьюхи , а тут обратная ситуация , меняем данные вьюхи , и нужно что бы модель обновилась посредством функционала angular , без обращения на прямую к контроллеру.

@Андрей Антонов · 06.04.2015, 23:56

Вот работающий пример:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
angular.module('slcode', [])
 
.factory('slcodeModels', function($parse){
    return {
        updateNgModel : function (scope, attrs, value) {
            if (!attrs.ngModel) return;
            var model = $parse(attrs.ngModel);
            model.assign(scope, value); 
        },
        
        readNgModel : function (scope, attrs) {
            if (!attrs.ngModel) return;
            var model = $parse(attrs.ngModel);
            return model(scope);
        }
    }
});

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
angular.module('slcodejQueryUI', ['slcode'])
 
.directive('slcodeAutocomplete', function (slcodeModels) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var input = $(element);
            var settings = {
                source: scope.$eval(attrs.slcodeAutocomplete) || [],
                change: function(event, ui) {
                    if (ui.item == null) return;
                    slcodeModels.updateNgModel(scope, attrs, ui.item.value);
                    if (attrs.slcodeAutocompleteChange) {
                        scope.$eval(attrs.slcodeAutocompleteChange)(scope, ui.item.value); 
                    }
                    scope.$apply();
                }
            };
            input.autocomplete(settings);
            
            scope.$watch(attrs.slcodeAutocomplete, function(newValue, oldValue) {
                input.autocomplete('option', 'source', newValue || []);
            });
        }
    };
})

HTML5
1
2
3
4
5
6
7
8
<div class="col-sm-9">
                                <input type="text" 
                                    class="form-control" 
                                    id="customer" 
                                    ng-model="quote.Customer"
                                    slcode-autocomplete="ref_customerNamesList"
                                />
                            </div>

Функция updateNgModel здесь - это то, что Вам нужно. Она парсит определение модели в html ng-model="quote.Customer", получает объект "quote.Customer", и присваивает ему переданное значение. Вызываться эта функция может откуда угодно, но в данном случае она вызывается из директивы 'slcodeAutocomplete'.

Данная директива добавляет джикверевский автокомплит к инпуту, но при этом делает так, чтобы изменение выбранного айтема (как Вам и надо - со стороны UI) - обображалось на angular модель.

@sau · 07.04.2015, 01:18 **[ТС]**

Ох блин ) , костыльный метод покороче будет ) , но спасибо , изучу вариант.
А вообще , в моем случае нужно было просто принудительно вызвать событие onchange через $("test").change(); , далее уже angular подцепит onchange своей директивой ng-change , другой вопрос был как это сделать красиво , без $("test").change(); , судя по коду выше , красота требует жертв ).

@vrodnenok · 08.04.2015, 21:43

JavaScript
1
2
3
4
5
6
YourApp.controller 'myTestCtrl' ->
  $scope.ControllerMethod = alert "i've been called upon change of #test input" 
// or in strait JS
YourApp.controller('myTestCtrl', function() {
  $scope.ControllerMethod = alert("i've been called upon change of #test input");
});

или я не понял вопроса?

@vrodnenok · 12.04.2015, 10:45

и почему я не могу удалить свой собственный пост...

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@sau 2773 / 2073 / 386 Регистрация: 22.07.2011 Сообщений: 7,820
	07.04.2015, 01:18 [ТС]
	Ох блин ) , костыльный метод покороче будет ) , но спасибо , изучу вариант. А вообще , в моем случае нужно было просто принудительно вызвать событие onchange через $("test").change(); , далее уже angular подцепит onchange своей директивой ng-change , другой вопрос был как это сделать красиво , без $("test").change(); , судя по коду выше , красота требует жертв ). 0

@vrodnenok 16 / 16 / 5 Регистрация: 17.05.2012 Сообщений: 124
	12.04.2015, 10:45
	и почему я не могу удалить свой собственный пост... 0