angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续

1).按钮loading

 --TODO

2). page loading状态

1.在module中注入指令

// Route State Load Spinner(used on page or content load)
app.directive('ngSpinnerLoader', ['$rootScope',
    function ($rootScope) {
        return {
            link: function (scope, element, attrs) {
                // by defult hide the spinner bar
                element.addClass('hide'); // hide spinner bar by default
                // display the spinner bar whenever the route changes(the content part started loading)
                $rootScope.$on('$stateChangeStart', function () {
                    element.removeClass('hide'); // show spinner bar
                });
                // hide the spinner bar on rounte change success(after the content loaded)
                $rootScope.$on('$stateChangeSuccess', function () {

                    setTimeout(function () {
                        element.addClass('hide'); // hide spinner bar
                    }, 500);
                    $("html, body").animate({
                        scrollTop: 0
                    }, 500);
                });
                //
                $rootScope.$on('savingStart', function () {
                    element.removeClass('hide'); // show spinner bar
                });

                $rootScope.$on('savingEnd', function () {
                    setTimeout(function () {
                        element.addClass('hide'); // hide spinner bar
                    }, 500);
                    $("html, body").animate({
                        scrollTop: 0
                    }, 500);
                });


            }
        };
    }

指令name: ngSpinnerLoader, 其中$rootScope.$on('savingStart', function () { element.removeClass('hide'); // show spinner bar });，注册了savingStart事件。

$on则是angularjs的事件注册函数, 这里涉及到Angularjs Controller 间通信机制

2.在index.html或者其他需要的页面调用指令，这里是公用的home.html中调用的。 调用格式：ng-spinner-loader,由ngSpinnerLoader=>ng-spinner-loader -分割每个大写字母开头的单词，首字母小写

　　

<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-loader class="page-spinner-loader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->

3.在controller中，点击保存的按钮事件中调用$scope.$emit('savingStart'); $emit则会将事件冒泡传递给父controller

$scope.saveBTP = function () {

                $scope.emit("savingStart");//page content loading status style
                loadingTool.laddasStart();//button loading status style
　　　　　　　　　//below sen ajax reqeust


               btpService.addBTP($scope.btp).then(function (response) {

                        $scope.$emit('savingEnd');
                         Ladda.stopAll();

                 }
    
}        

　　

如果是其他的controller中调用我的Controller的方法：

 

1.在被调用的controller中用$rootScope.$on方法

注册事件saveProgramStart

。

$rootScope.$on('saveProgramStart', function (e, args) {
            if (angular.isDefined($scope.form.program)) {
                $scope.saveProgram();  
            }
        });

2.在需要调用的controller中，定义一个方法，这个方法中，$rootScope.$emit('saveProgramStart');传递、通知、激活、调用 

.state('home.programs.detail', {
            url: '/:programId',
            views: {
                '@home': {
                    templateUrl: '/app/views/home.programs.detail.html',
                    controller: 'programDetailCtrl'
                    }
                },
                'menu@home': {
                    templateUrl: '/app/views/home.programs.detail.menu.html',
                    controller: function ($rootScope, $scope) {
                        $scope.saveProgram = function (e) {
                            $rootScope.$emit('saveProgramStart');
                        }
                    }
                }
            }
        })

顶部菜单， home.programs.detail.menu.html，这个是其他controller对应的view，想要调用主controller的方法。

    <button type="submit" class="btn btn-primary ladda-button" data-style="expand-right" data-ng-click="saveProgram($event)">
        Save
    </button>

这里的saveProgram是menu@home对应的子菜单view的controller，click方法调用的是自己匿名controller的saveProgram方法，这个方法中，调用了saveProgramStart, saveProgramStart是在主controller中注册的， 

saveProgramStart方法去 调用了，真正去发请求的保存事件saveProgram。

关于通信机制，以后再深入研究，待续...