web-dev-qa-db-fra.com

Est-il possible de "surveiller" les modifications des attributs

Est-il possible de "surveiller" les modifications de la directive? quelque chose comme ca:

.directive('vValidation', function() {
    return function(scope, element, attrs) {
        element.$watch(function() {
            if (this.hasClass('someClass')) console.log('someClass added');
        });
    }
})
angularjsangularjs-directive
54
iLemming

Oui. Vous pouvez utiliser attr.$observe si vous utilisez une interpolation sur l'attribut.

Mais s'il ne s'agit pas d'un attribut interpolé et que vous vous attendez à ce qu'il soit modifié quelque part dans l'application (ce qui est extrêmement déconseillé, lisez pièges courants ), que vous pouvez $watch un retour de fonction:

scope.$watch(function() {
    return element.attr('class'); 
}, function(newValue){
    // do stuff with newValue
});

Quoi qu’il en soit, c’est probablement que la meilleure approche pour vous serait de changer le code qui modifie la classe d’éléments. A quel moment cela change-t-il?

86
Caio Cunha
attrs.$observe('class', function(val){});
38
Ketan

Vous pouvez également regarder variable dans le contrôleur.

Ce code masque automatiquement la barre de notification lorsqu'un autre module affiche le message de retour.

HTML:

<notification-bar
    data-showbar='vm.notification.show'>
        <p> {{ vm.notification.message }} </p>
</notification-bar>

DIRECTIVE:

var directive = {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
        showbar: '=showbar',
    },
    templateUrl: '/app/views/partials/notification.html',
    controller: function ($scope, $element, $attrs) {

        $scope.$watch('showbar', function (newValue, oldValue) {
            //console.log('showbar changed:', newValue);
            hide_element();
        }, true);

        function hide_element() {
            $timeout(function () {
                $scope.showbar = false;
            }, 3000);
        }
    }
};

MODÈLE DE DIRECTIVE:

<div class="notification-bar" data-ng-show="showbar"><div>
    <div class="menucloud-notification-content"></div>
1
Marcin Rapacz