文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Angularjs中的指令创建ajax加载旋转器

问使用Angularjs中的指令创建ajax加载旋转器
EN

Stack Overflow用户

提问于 2013-12-23 09:06:23

回答 1查看 9.7K关注 0票数 5

我正在尝试创建一个简单的装载机。以下是我迄今所做的工作。谁能帮我看看，让我知道我哪里出了问题？

似乎没有添加CSS样式loading style-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>'
    };
});

HTML:

<spin-loader>
    <div ui-view></div>
</spin-loader>

然后通过调用：$scope.$emit('LOAD')来使用它

javascript

angularjs

回答 1

Stack Overflow用户

发布于 2014-01-08 15:30:47

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

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

在控制器中，您可以将$scope.isLoading设置为true或false。

app.controller('Ctrl', function ($scope) {

        var dummyLoadingVariable = false;

        $scope.$on('LOAD', function () {
            $scope.isLoading = true;
        });
        $scope.$on('UNLOAD', function () {
            $scope.isLoading = false;
        });

        $scope.toggleLoading = function(){
            dummyLoadingVariable = !dummyLoadingVariable;

            if(dummyLoadingVariable){
                $scope.$emit('LOAD');
            } else {
                $scope.$emit('UNLOAD')
            }
        }

    });

以及测试它的HTML：

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

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

下面是一个正在运行的Plunk：http://plnkr.co/edit/SetecF03aY6TnQilryWt?p=preview

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20740213

复制

相似问题

问使用Angularjs中的指令创建ajax加载旋转器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Angularjs中的指令创建ajax加载旋转器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Angularjs中的指令创建ajax加载旋转器
EN