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

  • 相关阅读:
    3d服务器配置
    Can't connect to postgres on centos with psycopg
    flask快速入门
    nohup: cannot run command “/bin/java”:
    linux 上redis的启动口令
    CentOS网络设置 couldn't resolve host 'mirrorlist.centos.org问题解决
    CentOS下使用Mysql
    解决nodejs跨域的一个中间件
    JS实现禁用滑动条但滑动条不消失的效果
    JQ实现下拉加载更多
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4126717.html
Copyright © 2020-2023  润新知