web-dev-qa-db-de.com

Ist es möglich, Änderungen von Attributen zu beobachten?

Ist es möglich, auf Änderungen an der Richtlinie zu "achten"? sowas in der Art:

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

Ja. Sie können attr.$observe wenn Sie am Attribut interpolieren.

Wenn dies jedoch kein interpoliertes Attribut ist und Sie erwarten, dass es von einer anderen Stelle in der Anwendung geändert wird (was äußerst nicht empfohlen wird, lesen Sie Common Pitfalls ), dann können Sie $watch eine Funktion zurückgeben:

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

Auf jeden Fall ist es wahrscheinlich der beste Ansatz für Sie, den Code zu ändern, der die Elementklasse ändert. In welchem ​​Moment wird es geändert?

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

Sie können die Variable auch im Controller beobachten.

Dieser Code verbirgt automatisch die Benachrichtigungsleiste, nachdem ein anderes Modul die Rückmeldung angezeigt hat.

HTML:

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

RICHTLINIE:

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);
        }
    }
};

RICHTLINIENVORLAGE:

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