Javascript 指令不工作angularjs

该指令在控制器中不起作用。如何修复它

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

baseapp.directive（'loading'，function（）{
警报（“加载”）；
返回{
限制：'E'，
替换：正确，
模板：“正在加载”，
链接：功能（范围、元素、属性）{
范围$watch（'加载'），功能（val）{
if（val）{
元素addClass（'show'）；
警报（“显示”）；
}否则{
元素addClass（'hide'）；
警惕（“隐藏”）；
}
});
}
}
});
baseapp.controller（'ListCtrl'，函数（$scope，$http）{
$scope.loading=true；
$http.get（'/blog'）.success（函数（数据）{
$scope.users=数据；
$scope.loading=false；
});
});

当加载名为的指令时。从控制器$scope.loading=true；

---

如果您阅读官方文档，则不会发生任何事情：

您可以阅读以下内容：

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

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

require: 'C'

---

我注意到，您不断地添加一个类

element.addClass（'show'）会导致if true和随后的false:
class='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');
                }
            });
        }
    }
    });

指令（'myDir'，函数（）{
返回{
限制：'E'，
替换：正确，
模板：“正在加载”，
链接：功能（范围、元素、属性）{
范围$watch（'加载'），功能（val）{
如果（val==真）{
元素addClass（'show'）；
element.removeClass（'hide'）；
}否则{
元素toggleClass（'hide'）；
element.removeClass（'show'）；
}
});
}
}
});

除此之外，它似乎在我这边工作得很好：

注意：我建议您不要使用警报进行调试，而是使用

控制台.log