javascript - 指令不工作 AngularJS

Question

该指令在 Controller 中不起作用。如何解决？

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

当您加载一个名为的指令时。来自 Controller $scope.loading = true; 什么也没发生

Answer 1

我注意到，您一遍又一遍地添加一个类 element.addClass('show'); 导致 if true 和后来 false: 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

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