[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 ...
随机推荐
- cocos2d-x 全面总结--字体描边和制作阴影
关于字体描边的实现,不考虑效果和效率的话,是有三种方式: ① 利用CCLabelTTF制作文字描边和阴影效果 ② 利用CCRenderTexture渲染文理的方式生成带有描边效果的文字 ③ 利用sha ...
- XAML概览 1(译自JeremyBytes.com)
(文章译自JeremyBytes.com,由于原文太长,故分成几篇,能力所限,如有疏漏,希望海涵.另外若有侵权,务必尽快告知) Overview 了解XAML (可扩展应用程序标记语言)是使用WPF和 ...
- Trie树也称字典树
Trie树 Trie树也称字典树,因为其效率很高,所以在在字符串查找.前缀匹配等中应用很广泛,其高效率是以空间为代价的. 一.Trie树的原理 利用串构建一个字典树,这个字典树保存了串的公共前缀信息, ...
- C/C++——C++变量的作用域与生命周期,C语言中变量的作用域和生命周期
全局变量 作用域:全局作用域(全局变量只需在一个源文件中定义,就可以作用于所有的源文件.) 生命周期:程序运行期一直存在 引用方法:其他文件中要使用必须用extern 关键字声明要引用的全局变量. 内 ...
- proguard 混淆android代码
官网 http://proguard.sourceforge.net/#manual/examples.html android 2.3后,新建的project默认就有一个project.proper ...
- intel xdk 打ios的ipa包
1.打包 2.点击edit.下载csr文件,然后上传到苹果开发者网址,生成cer文件 上面两步搞完,把最后的按钮设置成"yes" 3.上传配置文件
- 查看80端口被占用的方法(IIS、apmserv、system)
端口如果被其他程序占用就不能正常启动,比如有时启动时会提示WEB启动失败,其实就是80 端口被占用了,而迅雷等下载软件恰恰就是占用了80端口,关掉就行了.但有时迅雷等都没有开 也启动不了,那就是别的东 ...
- JQ避免出现多次执行一个事件的解决方案
点击按钮之后会多次执行一个事件的话,就在方法结尾加入如下代码,这样的话事件就可以只执行一次了 //避免出现多次执行事件的问题 event.stopPropagation(); 此外,时间的重复绑定也有 ...
- Oracle Standby Database 实现方案
Oracle Standby Database 实现方案 From: http://wanow.blog.hexun.com/4672755_d.html 字号:大 中 小 版本:V20060328 ...
- jquery的clone方法bug的修复
最近发现jquery的clone的bug,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,在网上发现一个插件,下载地址如下 ...