指令不起作用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

如果您阅读了官方文档： https : //docs.angularjs.org/guide/directive

您可以阅读以下内容：

限制选项通常设置为：
'A'-仅匹配属性名称
'E'-仅匹配元素名称
'C'-仅匹配类别名称

如果要像使用类一样将其用作类，则必须指定：

require: 'C'

Answer 2

我注意到的是，您在element.addClass('show');之上添加了一个类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');
                }
            });
        }
    }
    });

除此之外，它在我看来似乎还不错：

在线演示

注意 ：建议您不要使用警报进行调试，而应使用console.log 。