В Angular, как определить, что вход был изменен сторонним кодом?

0

Я сделал несколько примеров в Angular, где я что-то делаю в ответ на ввод данных пользователя во входной элемент.

Я использую следующий код в своей функции ссылок для обнаружения и реагирования на изменения:

            $element.bind("keyup", listener);
            $element.bind("change", listener);
            $element.bind('paste cut', function () {
                $browser.defer(listener);
            });

Это отлично работает с одним большим исключением. Я использую директиву датпикера Kendo UI на том же входе, чтобы пользователь мог выбрать дату в календаре. Когда пользователь меняет дату, нажимая на календарь, событие изменения не попадает в мой код.

Тот факт, что я использую пользовательский интерфейс Kendo, является произвольным; Полагаю, я должен ожидать эту проблему с любым сторонним Javascript-кодом.

Как я могу подключить свою функцию ссылки, чтобы она увидела, что поле изменяется при изменении кода Javascript?

Изменение: по запросу здесь приведен упрощенный пример проблемы. Это страница, содержащая текстовое поле и кнопку. Текстовое поле подключается с помощью Angular to pop к окну предупреждения при изменении содержимого поля. Кнопка изменяет значение поля вручную, а угловой ничего не сделает. Я хочу, чтобы он обнаружил это изменение и ответил всплывающим окном.

<!DOCTYPE html>
<html ng-app="myApp">
<head>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
    When you type something in the box focus away from the input, Angular code pops an alert box.
    <br />
    <input
        id="foo"        
        alert />
    <input
        type="button"
        value="But click this button to change the contents of the box and no alert happens." 
        onclick="document.getElementById('foo').value = 'bar';"/>
    <script>
        angular.module("myApp", [])
        .controller("myController", ["$scope", function ($scope) {
            $scope.foo = "foo";
        }])
        .directive('alert', ['$browser',function ($browser) {
            return {                
                link: function ($scope, $element, $attrs, ngModel) {                    
                    function listener() {
                        alert("listener function invoked!");
                    }                    
                    $element.bind("change", listener);
                    $element.bind('paste cut', function () {
                        $browser.defer(listener);
                    });
                }
            };
        }]);
    </script>
</body>
</html>
  • 1
    Можете ли вы представить дело, чтобы повторить эту проблему?
  • 0
    Да, вы должны ожидать, что с любым сторонним кодом JavaScript. Datepicker из начальной загрузки -> та же проблема. Я не решил эту проблему сам, но делать что-то с часами должно сработать. Извините, это то, что я помню ... Также вы можете попробовать установить $modelValue вручную
Показать ещё 4 комментария
Теги:
angularjs-directive

2 ответа

0
Лучший ответ

Я смог найти ответ, используя приведенные выше комментарии в качестве руководства. Я отредактирую это, чтобы быть более полным позже, но короткий ответ - потребовать ngModel и прикрепить к нему $ watch.

Поделиться
0

что делает изменения DOM таким образом против угловой философии, мы оставляем директивы для этого, поэтому угловые не поймают кнопку изменения, я имею в виду в этом пункте:

<input
        type="button"
        value="But click this button to change the contents of the box and no alert happens." 
        onclick="document.getElementById('foo').value = 'bar';"/>

Вам лучше (просто HTML и угловатый здесь):

/*without directive*/
<input type="text" id="foo" ng-model="foo" />
<input type="button" value="Change value" onclick="changeVal()"/>

В контроллер (я добавил $ watch)

.controller("myController", ["$scope", function ($scope) {
            $scope.foo = "foo";

            //when button pressed
            $scope.changeVal() = function{
              $scope.foo = "new value";
            };

       //when the foo value change, the $watch catch it
       $scope.$watch('foo', function (newVal, oldVal) {
            var newValue = newVal;
            if (newVal != oldVal) {
               alert("value changed");
              //add here whatever code ..
            }
        });

    }])
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню