[AngularJS] Adding custom methods to angular.module

时间:2024-11-20 10:06:19

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.