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。

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

上一篇:HUE配置文件hue.ini 的pig模块详解(图文详解)(分HA集群和非HA集群)


下一篇:Spring AOP原理(续)