There are situations where you might want to add additional methods toangular.module. This is easy to accomplish, and can be a handy technique.

  1. //For directive template
  2. <hello></hello>
  3.  
  4. //For directive controller
  5. <li menu-item ng-repeat="category in categories"
  6. class="menu-animation"
  7. ng-class="{'highlight':mouse_over}"
  8. ng-mouseenter="mouse_over = true"
  9. ng-mouseleave="mouse_over = false"
  10. ng-class="{'active':isCurrentCategory(category)}">
  11. <a ng-click="setCurrentCategory(category)">
  12. {{category.name}}
  13. </a>
  14. </li>
  1. var original = angular.module;
  2.  
  3. angular.module = function(name, deps, config){
  4.  
  5. var module = original(name, deps, config);
  6.  
  7. module.quickTemplate = function(name, template){
  8. module.directive(name, function() {
  9. return {
  10. template: template
  11. }
  12. });
  13. };
  14.  
  15. module.quickController = function(name, controller) {
  16. module.directive(name, function() {
  17. return {
  18. controller: controller
  19. }
  20. })
  21. };
  22.  
  23. return module;
  24. };

Use: We comment out the meunItem directive, instead using quickController method added to the end of the file.

  1. angular.module('categories', [
  2. 'eggly.models.categories',
  3. 'ngAnimate'
  4. ])
  5.  
  6. .config(function ($stateProvider) {
  7. $stateProvider
  8. .state('eggly.categories', {
  9. url: '/',
  10. views: {
  11. 'categories@': {
  12. controller: 'CategoriesController',
  13. templateUrl: 'app/categories/categories.tmpl.html'
  14. },
  15. 'bookmarks@': {
  16. controller: 'BookmarksController',
  17. templateUrl: 'app/categories/bookmarks/bookmarks.tmpl.html'
  18. }
  19. }
  20. });
  21. })
  22.  
  23. .controller('CategoriesController', function ($scope) {
  24.  
  25. })
  26.  
  27. /*
  28. .directive('menuItem', function(){
  29. var controller = function($scope){
  30. $scope.mouse_over = false;
  31. };
  32.  
  33. return {
  34. controller: controller
  35. }
  36. })*/
  37.  
  38. .animation('.menu-animation', function () {
  39. return {
  40. beforeAddClass: function (element, className, done) {
  41. if (className == 'highlight') {
  42. TweenLite.to(element, 0.2, {
  43. width: '223',
  44. borderLeft: '10px solid #89CD25',
  45. onComplete: done
  46. });
  47. TweenLite.to(element.find('a'), 0.2, {
  48. color: "#89CD25"
  49. });
  50. }
  51. else {
  52. done();
  53. }
  54. },
  55.  
  56. beforeRemoveClass: function (element, className, done) {
  57. if (className == 'highlight') {
  58. TweenLite.to(element, 0.4, {
  59. width: '180',
  60. borderLeft: '5px solid #333',
  61. onComplete: done
  62. });
  63. TweenLite.to(element.find('a'), 0.4, {
  64. color: "#5bc0de"
  65. });
  66. }
  67. else {
  68. done();
  69. }
  70. }
  71. };
  72. })
  73.  
  74. .quickController('menuItem', function($scope){
  75. $scope.mouse_over = false;
  76. })
  77. ;

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. 【Java多线程】互斥

    Java多线程学习2——互斥 一.前言 在上一节 (http://www.cnblogs.com/lzhen/p/3917966.html) 中,通过实现Runnable接口,可以实现多线程中的资源的 ...

  2. motan源码解读:注册中心zookeeper(1)

    Apache ZooKeeper is an effort to develop and maintain an open-source server which enables highly rel ...

  3. bzoj 3289 Mato的文件管理(莫队算法+BIT)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3289 [题意] 回答若干个询问:[l,r]区间内的逆序对个数. [思路] 莫队算法,B ...

  4. java学习随笔--- 捣蛋vector

    最近比较有时间啦,有时间搞下java,个人觉得学这门语言语法太多啦,不一一去学习啦,心血来潮,挂了个struct2的源代码,一入深似海啊,看得我天花缭乱,从最简单的开始吧 public static ...

  5. C++11 多线程

    C++11开始支持多线程编程,之前多线程编程都需要系统的支持,在不同的系统下创建线程需要不同的API如pthread_create(),Createthread(),beginthread()等,使用 ...

  6. (转)QR二维码生成及原理

    二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...

  7. django 搭建自己的博客

    原文链接:http://www.errdev.com/post/4/ 每一个爱折腾的程序员都有自己的博客,好吧,虽然我不太喜欢写博客,但是这样骚包的想法却不断涌现.博客园虽好,可以没有完全的掌控感,搭 ...

  8. ubuntu 错误 & 解决

    1.ssh时出现“段错误(核心已转储)” 原因:说明与ssh有关的内核代码被修改过并且部分代码访问内存过界 解决:1.将内核代码被修改过的部分修改回来        2.sudo apt-get re ...

  9. 《Java数据结构与算法》笔记-CH4-5不带计数字段的循环队列

    第四章涉及三种数据存储类型:栈,队列,优先级队列 1.概括:他们比数组和其他数据存储结构更为抽象,主要通过接口对栈,队列和优先级队列进行定义.这些 接口表明通过他们可以完成的操作,而他们的主要实现机制 ...

  10. 基于Linux2.6内核的加密容器法保护文件方法

            本文出自 "李晨光原创技术博客" 博客,谢绝转载!