[AngularJS] Adding custom methods to angular.module

標籤：style   blog   io   ar   color   sp   for   on   div   

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: {                    ‘[email protected]‘: {                        controller: ‘CategoriesController‘,                        templateUrl: ‘app/categories/categories.tmpl.html‘                    },                    ‘[email protected]‘: {                        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