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。
关于通信机制,以后再深入研究,待续...