директива не работает angularjs

Question

Директива не работает с контроллером. как это исправить?

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

При загрузке вызываемой директивы. из контроллера $ scope.loading = true; Ничего не происходит

Answer 1

То, что я заметил, что ваши добавления класса снова и снова element.addClass('show'); в результате, если оно истинно, а затем ложно: class='show hide show hide ...' и так далее, один быстрый способ, чтобы исправить это, чтобы удалить один из классов или вы можете переключать класс:

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

Другие, чем это, кажется, работает нормально на моем конце:

Online Demo

Примечание: Я рекомендую вам не использовать сигналы для отладки использования console.log вместо этого.

Answer 2

Если вы читали официальную документацию: https://docs.angularjs.org/guide/directive

Вы можете прочитать:

Ограничить вариант, как правило, устанавливается:
'A' - только матчи имени атрибута
'E' - соответствует только названию элемента
'C' - соответствует только классу

Если вы хотите использовать его как класс, как вы это делаете, то вы должны указать:

require: 'C'