[AngularJS] Adding custom methods to angular.module
There are situations where you might want to add additional methods toangular.module
. This is easy to accomplish, and can be a handy technique.
//For directive template
<hello></hello> //For directive controller
<li menu-item ng-repeat="category in categories"
class="menu-animation"
ng-class="{'highlight':mouse_over}"
ng-mouseenter="mouse_over = true"
ng-mouseleave="mouse_over = false"
ng-class="{'active':isCurrentCategory(category)}">
<a ng-click="setCurrentCategory(category)">
{{category.name}}
</a>
</li>
var original = angular.module; angular.module = function(name, deps, config){ var module = original(name, deps, config); module.quickTemplate = function(name, template){
module.directive(name, function() {
return {
template: template
}
});
}; module.quickController = function(name, controller) {
module.directive(name, function() {
return {
controller: controller
}
})
}; return module;
};
Use: We comment out the meunItem directive, instead using quickController method added to the end of the file.
angular.module('categories', [
'eggly.models.categories',
'ngAnimate'
]) .config(function ($stateProvider) {
$stateProvider
.state('eggly.categories', {
url: '/',
views: {
'categories@': {
controller: 'CategoriesController',
templateUrl: 'app/categories/categories.tmpl.html'
},
'bookmarks@': {
controller: 'BookmarksController',
templateUrl: 'app/categories/bookmarks/bookmarks.tmpl.html'
}
}
});
}) .controller('CategoriesController', function ($scope) { }) /*
.directive('menuItem', function(){
var controller = function($scope){
$scope.mouse_over = false;
}; return {
controller: controller
}
})*/ .animation('.menu-animation', function () {
return {
beforeAddClass: function (element, className, done) {
if (className == 'highlight') {
TweenLite.to(element, 0.2, {
width: '223',
borderLeft: '10px solid #89CD25',
onComplete: done
});
TweenLite.to(element.find('a'), 0.2, {
color: "#89CD25"
});
}
else {
done();
}
}, beforeRemoveClass: function (element, className, done) {
if (className == 'highlight') {
TweenLite.to(element, 0.4, {
width: '180',
borderLeft: '5px solid #333',
onComplete: done
});
TweenLite.to(element.find('a'), 0.4, {
color: "#5bc0de"
});
}
else {
done();
}
}
};
}) .quickController('menuItem', function($scope){
$scope.mouse_over = false;
})
;
Have to add quickController to the end of the file, otherwise, it breaks the chain.
[AngularJS] Adding custom methods to angular.module的更多相关文章
- 【angularJS】定义模块angular.module
模块定义了一个应用程序.控制器通常属于一个模块. JavaScript 中应避免使用全局函数.因为他们很容易被其他脚本文件覆盖. AngularJS 模块让所有函数的作用域在该模块下,避免了该问题. ...
- 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...
- AngularJs angular.Module模块接口配置
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- angularjs ngTable -Custom filter template-calendar
jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...
- AngularJS开发指南3:Angular主要组成部分以及如何协同工作
AngularJS的主要组成部分是: 启动(startup) - 展示“hello world!” 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器 ...
- angular.module 详解
AngularJS 模块 模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.serv ...
- Angular Module声明和获取重载
module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller.service.filter.directive…)封装在一起的能力.这样做可以将代码按照业务领域 ...
- [AngularJS] Extract predicate methods into filters for ng-if and ng-show
Leaking logic in controllers is not an option, filters are a way to refactor your code and are compa ...
随机推荐
- anible包模块管理
ansible使用包管理模块 一般使用的包管理模块的RPM,和YUM 参数 必填 默认 选择 说明 Conf_file No YUM的配置文件 Disable_dbg_check No No Yes/ ...
- spark connect to Cassandra problem
Cassandra rowkey is Blob type, cannot select by spark. How?
- public static void main(String arg[])
该语句定义了main方法. main方法是程序执行的入口,所有的java程序都必须具备一个main()方法,而且必须按照如上的格式来定义. 不具有main方法的类可以编译,但不能执行.因为它没有m ...
- DD_belatedPNG,解决 IE6 不支持 PNG-24 绝佳解决方案
png24在ie下支持透明.终于找到下面的可行办法: 我们知道 IE6 是不支持透明的 PNG-24 的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个 IE6 的透明 PNG-24 的方 ...
- 转】从源代码剖析Mahout推荐引擎
原博文出自于: http://blog.fens.me/mahout-recommend-engine/ 感谢! 从源代码剖析Mahout推荐引擎 Hadoop家族系列文章,主要介绍Hadoop家族产 ...
- 【转】B树、B-树、B+树、B*树
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- Centos 64位安装 EPEL源
#直接在线安装rpm包 rpm -ivh http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm # ...
- jQuery - Chaining
jQuery - Chaining @(编程) 通过 jQuery,您可以把动作/方法链接起来. Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery ...
- 用 Python 脚本实现对 Linux 服务器的监控
目前 Linux 下有一些使用 Python 语言编写的 Linux 系统监控工具 比如 inotify-sync(文件系统安全监控软件).glances(资源监控工具)在实际工作中,Linux 系统 ...
- 建立ODBC数据源(基于windows)
1. win+r 2. control 3. 打开数据源 4. 点击添加 5. 选择Oracle in OraClient11g_home1 ,点击完成 6. 填写,查看具体参数信息点击Help 7. ...