[AngularJS] Adding custom methods to angular.module
Angular to module angularjs Custom methods adding
2023-09-14 09:00:55 时间
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.
相关文章
- Angular 中依赖注入
- angular框架如何实现父子组件传值、非父子组件传值
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- angular面试问题_kafka面试题
- Angular 面试题汇总2-Component/Service (Angular v8+)
- to program_I Just Want To
- 关于 Angular 部署以及 index.html 里 base hRef 属性的关联关系
- 使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
- Angular 应用里 index.html 的作用
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular SSR 应用启动时的一些保护措施
- Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
- 利用Oracle TO函数实现数据转换(oracle to_函数)
- 使用angular写一个helloworld