AngularJS自定义插件实现网站用户引导功能示例

trainningService.trainning(trainningCourses.courses).done(function() { vm.isDone = true;});

.constant('trainningCourses', {  courses: [{   title: 'Step 1:',   templateUrl: 'trainning-content.html',   controller: 'StepPanelController',   controllerAs: 'stepPanel',   placement: 'left',   position: '#blogControl'  },{   title: 'Step 3:',   templateUrl: 'trainning-content.html',   controller: 'StepPanelController',   controllerAs: 'stepPanel',   placement: 'top',   position: {    top: 200,    left: 100   }  },   ...  {   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    }   }]  }]})

<div ng-app="com.github.greengerong" ng-controller="DemoController as demo"> <div class="alert alert-success fade in" ng-if='demo.isDone'>  <strong>All trainning setps done!</strong> </div> <button id="startAgain" class="btn btn-primary start-again" ng-click="demo.trainning()">You can start trainning again</button> <div class="blog">  <form class="form-inline">   <div class="form-group">    <label class="sr-only" for="exampleInputAmount">Blog :</label>    <div class="input-group">     <input id="blogControl" type="text" class="form-control" />    </div>   </div>   <button id="submitBlog" class="btn btn-primary" ng-click="demo.backdrop()">Public blog</button>  </form> </div> <script type="text/ng-template" id="modal-backdrop.html">  <div class="modal-backdrop fade in {{backdropClass}}" ng-style="{'z-index': zIndex || 1040}"></div> </script> <script type="text/ng-template" id="trainning-step.html">  <div class="trainning-step">   <div style="display:block; z-index:1080;left:-1000px;top:-1000px;" ng-style="positionStyle" class="step-panel {{currentTrainning.placement}} fade popover in {{currentTrainning.stepClass}}" ng-show="!isProgressing">    <div class="arrow"></div>    <div class="popover-inner">     <h3 class="popover-title" ng-if='currentTrainning.title'>{{currentTrainning.title}}</h3>     <div class="popover-content">     </div>    </div>   </div>   <ui-backdrop backdrop-class="currentTrainning.backdropClass" ng-if="currentTrainning.backdrop !== false"></ui-backdrop>  </div> </script> <script type="text/ng-template" id="trainning-content.html">  <div class="step-content">   <div>{{ stepPanel.texts[stepPanel.currentStep - 1]}}</div>   <div class="next-step">    <ul class="step-progressing">    <li data-ng-repeat="item in stepPanel.trainnings.length | range"     data-ng-class="{active: stepPanel.currentStep == item}">    </li>   </ul>    <button type="button" class="btn btn-link btn-next pull-right" ng-click="stepPanel.trainningInstance.nextStep({$event:$event, step:step});">Next</button>   </div>  </div> </script> <script type="text/ng-template" id="trainning-content-done.html">  <div class="step-content">    <div> {{ stepPanel.texts[stepPanel.currentStep - 1]}}   </div>   <div class="next-step">    <ul class="step-progressing">    <li data-ng-repeat="item in stepPanel.trainnings.length | range"     data-ng-class="{active: stepPanel.currentStep == item}">    </li>   </ul>    <button type="button" class="btn btn-link pull-right" ng-click="nextStep({$event:$event, step:step});">Got it</button>   </div>  </div> </script></div>

.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;  }  } }}

//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; }]);