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的更多相关文章

  1. 【angularJS】定义模块angular.module

    模块定义了一个应用程序.控制器通常属于一个模块. JavaScript 中应避免使用全局函数.因为他们很容易被其他脚本文件覆盖. AngularJS 模块让所有函数的作用域在该模块下,避免了该问题. ...

  2. 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...

  3. AngularJs angular.Module模块接口配置

    angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...

  4. AngularJs angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

  5. angularjs ngTable -Custom filter template-calendar

    jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...

  6. AngularJS开发指南3:Angular主要组成部分以及如何协同工作

    AngularJS的主要组成部分是: 启动(startup) - 展示“hello world!” 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器 ...

  7. angular.module 详解

    AngularJS 模块 模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.serv ...

  8. Angular Module声明和获取重载

    module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller.service.filter.directive…)封装在一起的能力.这样做可以将代码按照业务领域 ...

  9. [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 ...

随机推荐

  1. 2014搜狗前端面经【B事业部】

    本来就投了一份简历,后来又收到了个B事业部的面试电话,今天刚面完一面,总体感觉还是很基础的,其中一名面试官帅到不行啊!另一个也不差,真是幸胡...(sorry,跑题了...) 上来先做了份笔试题,超级 ...

  2. 捣蛋phpwind过滤器执行流程

    从上一篇我们就大概就知道过滤器的定义和怎样去配置,这一节来说说执行流程 public function run($handlerAdapter = null) { $handlerAdapter != ...

  3. jquery ajax跨域的完美解决方法(jsonp方式)

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码     今天在项目中需要做远程数据加载 ...

  4. Linux下IP的配置

    修改ip地址1.即时生效:# ifconfig eth0 192.168.1.102 netmask 255.255.255.02.启动生效:修改/etc/sysconfig/network-scri ...

  5. 《The Google File System》论文阅读笔记——GFS设计原理

    一.设计预期 设计预期往往针对系统的应用场景,是系统在不同选择间做balance的重要依据,对于理解GFS在系统设计时为何做出现有的决策至关重要.所以我们应重点关注: 失效是常态 主要针对大文件 读操 ...

  6. GLSL Notes

    [GLSL Notes] API of shader: glCreateShader(), glShaderSource(), glCompileShader(), glGetShadrInfoLog ...

  7. USB2.0规范

    USB是一种支持热插拔的高速串行传输总线,它使用差分信号来传输数据,最高速度可达480Mb/S. USB支持“总线供电”和“自供电”两种供电模式.在总线供电模式下,设备最多可以获得500mA的电流.U ...

  8. IIS中的上传目录权限设置问题

    虽然 Apache 的名声可能比 IIS 好,但我相信用 IIS 来做 Web 服务器的人一定也不少.说实话,我觉得 IIS 还是不错的,尤其是 Windows 2003 的 IIS 6(马上 Lon ...

  9. POJ 3174 Alignment of the Planets (暴力求解)

    题意:给定 n 个坐标,问你三个共线的有多少组. 析:这个题真是坑啊,写着 n <= 770,那么一秒时间,三个循环肯定超时啊,我一直不敢写了,换了好几种方法都WA了,也不知道为什么,在比赛时坑 ...

  10. Tomcat 系统架构与设计模式,第 1 部分: 工作原理(转载)

    简介: 这个分为两个部分的系列文章将研究 Apache Tomcat 的系统架构以及其运用的很多经典设计模式.本文是第 1 部分,将主要从 Tomcat 如何分发请求.如何处理多用户同时请求,还有它的 ...