zoukankan      html  css  js  c++  java
  • [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, {
                             '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, {
                             '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.

  • 相关阅读:
    容器操作--管理迭代器
    顺序容器--添加及访问元素
    日志记录-20151103
    顺序容器--容器库.迭代器
    使用-flat.vmdk恢复虚拟机
    H3C-交换机维护命令大全
    Centos6.5 安装zabbix-agent 3.0
    Linux系统调试工具之sysdig使用详解
    通过实例学习 tcpdump 命令
    系统之锹sysdig:Linux服务器监控和排障利器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4126717.html
Copyright © 2011-2022 走看看