对于controller、controllerAs、resolve、template、templateUrl这类类似路由的处理代码，完全可以移到到你的同类插件中去。它们可以增加插件的更多定制化扩展。关于这部分代码的解释，博主将会在后续文章中为大家推送。
利用$injector.invoke动态注入和调用Angular service，这样既能获取Angular其他service注入的扩展性，也能获取到函数的动态性。如上例中的屏幕居中的自定义扩展方式。
这类设计要点，同样可以运用到想modal、alert、overload这类全局插件中。有兴趣的读者，你可以在博主的codepen笔记中阅读这段代码。
上述代码摘录如下：
HTML：
<div ng-app="com.github.greengerong" ng-controller="DemoController as demo"> <div ng-if='demo.isDone'> <strong>All trainning setps done!</strong> </div> <button ng-click="demo.trainning()">You can start trainning again</button> <div> <form> <div> <label for="exampleInputAmount">Blog :</label> <div> <input type="text" /> </div> </div> <button ng-click="demo.backdrop()">Public blog</button> </form> </div> <script type="text/ng-template"> <div ng-style="{'z-index': zIndex || 1040}"></div> </script> <script type="text/ng-template"> <div> <div ng-style="positionStyle" ng-show="!isProgressing"> <div></div> <div> <h3 ng-if='currentTrainning.title'>{{currentTrainning.title}}</h3> <div> </div> </div> </div> <ui-backdrop backdrop-class="currentTrainning.backdropClass" ng-if="currentTrainning.backdrop !== false"></ui-backdrop> </div> </script> <script type="text/ng-template"> <div> <div>{{ stepPanel.texts[stepPanel.currentStep - 1]}}</div> <div> <ul> <li data-ng-repeat="item in stepPanel.trainnings.length | range" data-ng-class="{active: stepPanel.currentStep == item}"> </li> </ul> <button type="button" ng-click="stepPanel.trainningInstance.nextStep({$event:$event, step:step});">Next</button> </div> </div> </script> <script type="text/ng-template"> <div> <div> {{ stepPanel.texts[stepPanel.currentStep - 1]}} </div> <div> <ul> <li data-ng-repeat="item in stepPanel.trainnings.length | range" data-ng-class="{active: stepPanel.currentStep == item}"> </li> </ul> <button type="button" ng-click="nextStep({$event:$event, step:step});">Got it</button> </div> </div> </script> </div>
CSS：
.last-step{ /* background-color: blue;*/ } .last-backdrop{ background-color: #FFFFFF; } .blog{ position: absolute; left: 300px; top: 100px; } .start-again{ position: absolute; left: 400px; top: 250px; } .next-step { .step-progressing { margin: 10px 0px; display: inline-block; li { margin-right: 5px; border: 1px solid #fff; background-color: #6E6E6E; width: 12px; height: 12px; border-radius: 50%; display: inline-block; &.active { background-color: #0000FF; } } } }
JS：
//Please set step content to fixed width when complex content or dynamic loading. angular.module('com.github.greengerong.backdrop', []) .directive('uiBackdrop', ['$document', function($document) { return { restrict: 'EA', replace: true, templateUrl: 'modal-backdrop.html', scope: { backdropClass: '=', zIndex: '=' } /* ,link: function(){ $document.bind('keydown', function(evt){ evt.preventDefault(); evt.stopPropagation(); }); scope.$on('$destroy', function(){ $document.unbind('keydown'); }); }*/ }; }]) .service('modalBackdropService', ['$rootScope', '$compile', '$document', function($rootScope, $compile, $document) { var self = this; self.backdrop = function(backdropClass, zIndex) { var $backdrop = angular.element('<ui-backdrop></ui-backdrop>') .attr({ 'backdrop-class': 'backdropClass', 'z-index': 'zIndex' }); var backdropScope = $rootScope.$new(true); backdropScope.backdropClass = backdropClass; backdropScope.zIndex = zIndex; $document.find('body').append($compile($backdrop)(backdropScope)); return function() { $backdrop.remove(); backdropScope.$destroy(); }; }; }]); angular.module('com.github.greengerong.trainning', ['com.github.greengerong.backdrop', 'ui.bootstrap']) .directive('trainningStep', ['$timeout', '$http', '$templateCache', '$compile', '$position', '$injector', '$window', '$q', '$controller', function($timeout, $http, $templateCache, $compile, $position, $injector, $window, $q, $controller) { return { restrict: 'EA', replace: true, templateUrl: 'trainning-step.html', scope: { step: '=', trainnings: '=', nextStep: '&', cancel: '&' }, link: function(stepPanelScope, elm) { var stepPanel = elm.find('.step-panel'); stepPanelScope.$watch('step', function(step) { if (!step) { return; } stepPanelScope.currentTrainning = stepPanelScope.trainnings[stepPanelScope.step - 1]; var contentScope = stepPanelScope.$new(false); loadStepContent(contentScope, { 'currentStep': stepPanelScope.step, 'trainnings': stepPanelScope.trainnings, 'currentTrainning': stepPanelScope.currentTrainning, 'trainningInstance': { 'nextStep': stepPanelScope.nextStep, 'cancel': stepPanelScope.cancel } }).then(function(tplAndVars) { elm.find('.popover-content').html($compile(tplAndVars[0])(contentScope)); }).then(function() { var pos = stepPanelScope.currentTrainning.position; adjustPosition(stepPanelScope, stepPanel, pos); }); }); angular.element($window).bind('resize', function() { adjustPosition(stepPanelScope, stepPanel, stepPanelScope.currentTrainning.position); }); stepPanelScope.$on('$destroy', function() { angular.element($window).unbind('resize'); }); function getPositionOnElement(stepScope, setpPos) { return $position.positionElements(angular.element(setpPos), stepPanel, stepScope.currentTrainning.placement, true); } function positionOnElement(stepScope, setpPos) { var targetPos = angular.isString(setpPos) ? getPositionOnElement(stepScope, setpPos) : setpPos; var positionStyle = stepScope.currentTrainning || {}; positionStyle.top = targetPos.top + 'px'; positionStyle.left = targetPos.left + 'px'; stepScope.positionStyle = positionStyle; } function adjustPosition(stepScope, stepPanel, pos) { if (!pos) { return; } var setpPos = angular.isFunction(pos) || angular.isArray(pos) ? $injector.invoke(pos, null, { trainnings: stepScope.trainnings, step: stepScope.setp, currentTrainning: stepScope.currentTrainning, stepPanel: stepPanel }) : pos; //get postion should wait for content setup $timeout(function() { positionOnElement(stepScope, setpPos); }); } function loadStepContent(contentScope, ctrlLocals) { var trainningOptions = contentScope.currentTrainning, getTemplatePromise = function(options) { return options.template ? $q.when(options.template) : $http.get(angular.isFunction(options.templateUrl) ? (options.templateUrl)() : options.templateUrl, { cache: $templateCache }).then(function(result) { return result.data; }); }, getResolvePromises = function(resolves) { var promisesArr = []; angular.forEach(resolves, function(value) { if (angular.isFunction(value) || angular.isArray(value)) { promisesArr.push($q.when($injector.invoke(value))); } }); return promisesArr; }, controllerLoader = function(trainningOptions, trainningScope, ctrlLocals, tplAndVars) { var ctrlInstance; ctrlLocals = angular.extend({}, ctrlLocals || {}, trainningOptions.locals || {}); var resolveIter = 1; if (trainningOptions.controller) { ctrlLocals.$scope = trainningScope; angular.forEach(trainningOptions.resolve, function(value, key) { ctrlLocals[key] = tplAndVars[resolveIter++]; }); ctrlInstance = $controller(trainningOptions.controller, ctrlLocals); if (trainningOptions.controllerAs) { trainningScope[trainningOptions.controllerAs] = ctrlInstance; } } return trainningScope; }; var templateAndResolvePromise = $q.all([getTemplatePromise(trainningOptions)].concat(getResolvePromises(trainningOptions.resolve || {}))); return templateAndResolvePromise.then(function resolveSuccess(tplAndVars) { controllerLoader(trainningOptions, contentScope, ctrlLocals, tplAndVars); return tplAndVars; }); } } }; }]) .service('trainningService', ['$compile', '$rootScope', '$document', '$q', function($compile, $rootScope, $document, $q) { var self = this; self.trainning = function(trainnings) { var trainningScope = $rootScope.$new(true), defer = $q.defer(), $stepElm = angular.element('<trainning-step></trainning-step>') .attr({ 'step': 'step', 'trainnings': 'trainnings', 'next-step': 'nextStep($event, step);', 'cancel': 'cancel($event, step)' }), destroyTrainningPanel = function(){ if (trainningScope) { $stepElm.remove(); trainningScope.$destroy(); } }; trainningScope.cancel = function($event, step){ defer.reject('cancel'); }; trainningScope.nextStep = function($event, step) { if (trainningScope.step === trainnings.length) { destroyTrainningPanel(); return defer.resolve('done'); } trainningScope.step++; }; trainningScope.trainnings = trainnings; trainningScope.step = 1; $document.find('body').append($compile($stepElm)(trainningScope)); trainningScope.$on('$locationChangeStart', destroyTrainningPanel); return { done: function(func) { defer.promise.then(func); return this; }, cancel: function(func) { defer.promise.then(null, func); return this; } }; }; }]); angular.module('com.github.greengerong', ['com.github.greengerong.trainning']) .filter('range', [function () { return function (len) { return _.range(1, len + 1); }; }]) .controller('StepPanelController', ['currentStep', 'trainnings', 'trainningInstance', 'trainnings', function(currentStep, trainnings, trainningInstance, trainnings) { var vm = this; vm.currentStep = currentStep; vm.trainningInstance = trainningInstance; vm.trainnings = trainnings; vm.texts = ['Write your own sort blog.', 'Click button to public your blog.', 'View your blog info on there.', 'Click this button, you can restart this trainning when .', 'All trainnings done!']; return vm; }]) .constant('trainningCourses', { courses: [{ title: 'Step 1:', templateUrl: 'trainning-content.html', controller: 'StepPanelController', controllerAs: 'stepPanel', placement: 'left', position: '#blogControl' }, { title: 'Step 2:', templateUrl: 'trainning-content.html', controller: 'StepPanelController', controllerAs: 'stepPanel', placement: 'right', backdrop: false, position: '#submitBlog' }, { title: 'Step 3:', templateUrl: 'trainning-content.html', controller: 'StepPanelController', controllerAs: 'stepPanel', placement: 'top', position: { top: 200, left: 100 } }, { title: 'Step 4:', templateUrl: 'trainning-content.html', controller: 'StepPanelController', controllerAs: 'stepPanel', placement: 'bottom', position: '#startAgain' }, { stepClass: 'last-step', backdropClass: 'last-backdrop', templateUrl: 'trainning-content-done.html', controller: 'StepPanelController', controllerAs: 'stepPanel', position: ['$window', 'stepPanel', function($window, stepPanel) { var win = angular.element($window); return { top: (win.height() - stepPanel.height()) / 2, left: (win.width() - stepPanel.width()) / 2 } }] }] }) .controller('DemoController', ['trainningService', 'trainningCourses', 'modalBackdropService', function(trainningService, trainningCourses, modalBackdropService) { var vm = this; vm.trainning = function() { //call this service should wait your really document ready event. trainningService.trainning(trainningCourses.courses) .done(function() { vm.isDone = true; }); }; var backdropInstance = angular.noop; vm.backdrop = function() { modalBackdropService.backdrop(); }; vm.trainning(); return vm; }]);