指令不起作用angularjs

Question

The directive does not work from the controller. how to fix it?

baseapp.directive('loading', function () {
    alert('loading');
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="loading">loading</div>',
        link: function (scope, element, attr) {
            scope.$watch('loading', function (val) {
                if (val) {
                    element.addClass('show');
                    alert('show');
                } else {
                    element.addClass('hide');
                    alert('hide');
                }
            });
        }
    }
});

baseapp.controller ('ListCtrl', function ($scope, $http) {
    $scope.loading = true;
    $http.get('/blog').success(function(data) {
        $scope.users = data;
        $scope.loading = false;
    });
});

When you load a directive called. from the controller $ scope.loading = true; Nothing happens

Answer 1

If you read the official documentation: https://docs.angularjs.org/guide/directive

You can read this:

The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name

If you want to use it as a class like you do, then you have to specify :

require: 'C'

Answer 2

What I noticed is that your adding a class over and over element.addClass('show'); resulting in if true and later false: class='show hide show hide ...' and so forth, one quick way to correct this is to remove one of the classes or you can toggle class:

 .directive('myDir', function() {
      return {
        restrict: 'E',
        replace: true,
        template: '<div class="loading">loading</div>',
        link: function (scope, element, attr) {
            scope.$watch('loading', function (val) {
                if (val===true) {
                    element.addClass('show');
                     element.removeClass('hide');
                } else {
                    element.toggleClass('hide');
                    element.removeClass('show');
                }
            });
        }
    }
    });

Other than that it seems to be working just fine on my end:

Online Demo

Note : I recommend you not to use alerts for debugging use console.log instead.