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。

 

關於通訊機制，之後再深刻研究，待續...