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