angular-tour 用户新手引导

1. 下载安装

   bower install angular-tour
   

2. 建立依赖，引入文件

   <script src="bower_components/jquery/jquery.js"></script>
   <script src="bower_components/angular/angular.js"></script>
   <script src="bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>
   

3. 使用  首先建立<tour>元素进行包裹

   // step 关联$scope.currentStep,默认为-1，为0时自动执行;
   // post-tour 执行完成时执行
   // post-step  最后一步时被调用
   // tour-complete 每次步数改变时执行
   <tour step="currentStep" post-tour="postTourCallback()" post-step="postStepCallback()" tour-complete="tourCompleteCallback()">
       <virtual-step
       // 标题
         tourtip="Angular Tour allows you to give an interactive tour to showcase the features of your website."
       // 下一步按钮内容
         tourtip-next-label="Learn more"
       // 出现位置
         tourtip-placement="right"
       // 步数
         tourtip-step="0"
       // 调转目标 id为e0的元素
         tourtip-element="#e0"></virtual-step>
       <virtual-step
         tourtip="Angular tour has some cool features."
         tourtip-placement="right"
         tourtip-step="1"
         tourtip-element="#e1"></virtual-step>
       <virtual-step
         tourtip="And is tested in all major browsers."
         tourtip-next-label="Continue"
         tourtip-placement="bottom"
         tourtip-step="2"
         tourtip-element="#e2"></virtual-step>
       <virtual-step
         tourtip="Thanks for reading. Head over to the github page for more info."
         tourtip-next-label="Finish"
         tourtip-placement="left"
         tourtip-step="3"
         tourtip-element="#e3"></virtual-step>
     </tour>
   

   　　

4. angularjs内容启动

   angular.module('demoApp', ['angular-tour', 'ngCookies'])
         .controller('DemoCtrl', function($scope, $cookies) {
         // $scope.currentStep 从cookie中获取
   
           var curStep = $cookies.get('myTour');
           if(typeof curStep === 'string')
             curStep = parseInt(curStep);
   
           $scope.currentStep = curStep || 0;
   
           $scope.postTourCallback = function() {
             console.log('tour closes');
           };
   
           $scope.tourCompleteCallback = function() {
             console.log('tour completed');
           }
   
           $scope.postStepCallback = function() {
             console.log('Tour - Update Step', $scope.currentStep);
             $cookies.put('myTour', $scope.currentStep);
           };
         });