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。

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

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

  1. angularJs项目实战!02:前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...

  2. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  3. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  4. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  5. php+ajax实现登录按钮加载loading效果

    php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...

  6. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  7. AngularJs项目实践总结

    今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularjs是不缺控件的,Github里现 ...

  8. angularJS支持的事件

    AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ...

  9. AngularJs项目

    AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularj ...

随机推荐

  1. 【Hibernate 5】继承映射配置及多态查询

    一.继承实现的三种策略 1.1,单表继承.每棵类继承树使用一个表(table per class hierarchy) -->本文主要介绍的继承策略 类继承树对应多个类,要把多个类的信息存放在一 ...

  2. 五、用户数据报传输(UDP)

    1.UDP常用的发送和接收函数 int recvfrom(int sockfd,void *buf,int len,unsigned int flags,struct sockaddr *from,i ...

  3. C# 打印异常

    1. [代码]函数:将异常打印到LOG文件     跳至 [1] [2] [4] [全屏预览] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  4. com.google.inject.CreationException: Guice creation errors

    错误的原因:xml文件中方法名重复或错误

  5. JAVA设计模式--State(状态模式)

    状态模式(State Pattern)是设计模式的一种,属于行为模式. 定义(源于Design Pattern):当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要 ...

  6. pect-shell中的自动交互

    这是我在ST写的自动登陆ssh的脚本, 分两个文件 文件1: sssh #!/bin/bash #xql 2011/01/4#auto ssh 138.198.230.170 case $1 in & ...

  7. SSDT Hook

    一.效果图 二.分析 这里对NtCreateProcessEx做拦截,用WinDbg来定位该函数在SSDT中的记录地址: : kd> dd KeServiceDescriptorTable 80 ...

  8. .NET中的IO操作之文件流

    读操作 //1.创建文件流 FileStream fsRead =new FileStream("1.txt",FileMode.Open); //2.创建缓冲区,正常情况下,是不 ...

  9. mongodb基础用法

    安装部分 mongodb配置方法 mongodb的安装目录 C:\MongoDB\Server\3.2\bin 创建以下目录 c:\mongo\log c:\mongo\db 创建mongodb的配置 ...

  10. nginx学习笔记1

    Nginx是使用c语言编写的,查看nginx编译时参数的设定  使用nginx -V命令查看 可以使用nginx -h命令查看命令帮助 配置文件中将worker process绑定到cpu的特定内核上 ...