首页 > 代码库 > [AngularJS] Adding custom methods to angular.module

[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