Javascript 使用Angularjs中的指令创建ajax加载微调器

我正在尝试创建一个简单的加载程序。下面是我到目前为止所做的。谁能看一下，告诉我哪里出了问题吗

似乎没有添加CSS样式

加载样式-2

。我的DOM只显示：

<span class=""></span>

我的指令：

angular.module('loaderModule', [
    'restangular',
])

.controller('appLoaderController', ['$scope', function ($scope) {
    $scope.$on('LOAD', function () {
        $scope.loading = "loading style-2"
    });
    $scope.$on('UNLOAD', function () {
        $scope.loading = ""
    });
}])

.directive('spinLoader', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<span class="{{ loading }}"></span><div ng-transclude ></div>'
    };
});

角度模块（'loaderModule'[ "restanglar",， ]) .controller（'appLoaderController'，['$scope'，函数（$scope）{ $scope.$on（'LOAD'，function（）{ $scope.loading=“加载样式-2” }); $scope.$on（'UNLOAD'，函数（）{ $scope.loading=“” }); }]) .directive（'spinLoader'，function（）{ 返回{ 限制：'E'， 是的， 模板：“” }; }); HTML:

angular.module('loaderModule', [
    'restangular',
])

.controller('appLoaderController', ['$scope', function ($scope) {
    $scope.$on('LOAD', function () {
        $scope.loading = "loading style-2"
    });
    $scope.$on('UNLOAD', function () {
        $scope.loading = ""
    });
}])

.directive('spinLoader', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<span class="{{ loading }}"></span><div ng-transclude ></div>'
    };
});

---

然后，我只需通过调用来使用它：

$scope.$emit（'LOAD'）

我将在您的指令中使用ng类，如下所示：

    app.directive('spinLoader', function() {
        return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-class="{loading: isLoading, style2: isLoading}" ng-transclude></div>'
        };
    });

以及测试它的HTML：

isLoading: {{ isLoading }}
<br/>
<spin-loader>
    <div ui-view>Transcluded</div>
</spin-loader>

<br/>
<button ng-click="toggleLoading()">toggleLoading()</button>

isLoading:{{isLoading}


排除


切换加载（）

---

这里有一个运行它的例子：

你可能想看看@Balachandra，这是一个很好的ajax解决方案，但我选择了另一种解决方案，这样我可以随时调用微调器。对我来说很好@dfsq我明白了是的，很奇怪，但是我有别的事情要做，因为我只是一片空白class@dfsq我现在看到了需要添加ng controller=“appLoaderController”的问题，就像您在代码中所做的那样。谢谢

isLoading: {{ isLoading }}
<br/>
<spin-loader>
    <div ui-view>Transcluded</div>
</spin-loader>

<br/>
<button ng-click="toggleLoading()">toggleLoading()</button>