Is it possible to 'watch' attributes' changes

Question

Is it possible to "watch" for ui changes on the directive? something like that:

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

Solution 1

Yes. You can use attr.$observe if you use interpolation at the attribute.

But if this is not an interpolated attribute and you expect it to be changed from somewhere else in the application (what is extremely not recommended, read Common Pitfalls), than you can $watch a function return:

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

Anyway, its probably that the best approach for you would be change the code that changes the element class. Which moment does it get changed?

Solution 2

attrs.$observe('class', function(val){});

Solution 3

You can also watch variable in the controller.

This code automatically hides notification bar after some other module displays the feedback message.

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

DIRECTIVE TEMPLATE:

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