Как следить за изменениями $ scope в директиве?

javascript angularjs angularjs-directive

401 просмотра

1 ответ

У меня есть такая директива:

app.directive('selectedForm', function(MainService) {
    return {
        scope: {
            formName: '=currentForm'
        },
        restrict: 'E', 
        link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('formName', function(oldV, newV) {
                console.log(iElm);
                if (someCondition) {
                    MainService.getForm($scope.formName).then(function(re) {
                        iElm.html(re);
                    });
                }
            });
        }
    };
});

Но проблема в том, что я не могу наблюдать за изменениями. У меня есть <select>элемент в DOM, который меняет значение currentFormusign ngModel. Но, даже если я выбрал опцию, watchфункция не работает. Я что-то пропустил?

Автор: Faizuddin Mohammed Источник Размещён: 08.11.2019 11:23

Ответы (1)


0 плюса

Решение

Вы не можете использовать то же самое $watchв так angular directiveже, как вы используете в angular controller. Вместо этого измените его на что-то вроде этого:

измените ваш htmlэлемент select на что-то вроде этого:

<select model="selectedElements">
    ...
    ...
</select>

и в вашей директиве измените $watchна:

...
link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('iAttrs.model', function(oldV, newV) {
...

Смотрите также: Это нормально, смотрите область действия внутри пользовательской директивы?


РЕДАКТИРОВАТЬ:

Код в вашем случае для просмотра значения <select ng-model='currentForm'> ... </select>будет:

...
link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('iAttrs.currentForm', function(oldV, newV) {
...

РЕДАКТИРОВАТЬ 2

обновления в соответствии с комментариями:

В вашем HTML

<selected-form ng-model="currentForm"></selectedForm>

и в вашем контроллере

...
link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('iAttrs.ngModel', function(oldV, newV) {
...

РЕДАКТИРОВАТЬ 3

увидеть этот обновленный плункер:

https://plnkr.co/edit/v5EnmpQ9UtApnM5ErnYi?p=preview

Автор: Raman Sahasi Размещён: 20.08.2016 02:15
Вопросы из категории :
32x32