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

您可以阅读：

限制选项通常设置为：
  ＆＃39; A＆＃39; - 仅匹配属性名称
  ＆＃39; E＆＃39; - 仅匹配元素名称
  ＆＃39; C＆＃39; - 仅匹配班级名称

如果你想像你一样使用它，那么你必须指定：

require: 'C'

Answer 2

我注意到你一遍又一遍地添加一个类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。

指令不工作angularjs

2 个答案: