无法在 angular-material 应用上实施 angular-intro.js

Question

我无法在我的 angular-material 应用程序上使用 angular-intro.js。我已经尝试在我的应用程序之外通过一个简化的 plunker 实现它，但仍然没有取得积极的结果。谁能指出我做错了什么？？

http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview

我还没有找到有人在 angular-material 应用程序上实现这个的例子，我只在 angular-js 应用程序上看到过它。以下是我的看法。在我的应用程序和 plunker 中，CallMe() 似乎从未被调用过。

<html>
  <head>
    <link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" data-require="angular-material@1.1.0-rc2" data-semver="1.1.0-rc2" />
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js" data-require="angular-material@1.1.0-rc2" data-semver="1.1.0-rc2"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-require="angularjs@1.5.3" data-semver="1.5.3"></script>
    <script src="https://code.angularjs.org/1.5.3/angular-animate.js" data-require="angular-animate@1.5.3" data-semver="1.5.3"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js" data-require="angular-aria@1.5.3" data-semver="1.5.3"></script>
    <script src="https://github.com/itzgAndEnenbee" data-require="angular-messages@1.5.3" data-semver="1.5.3"></script>
    <link href="style.css" rel="stylesheet" />
    <link href="introjs.css" rel="stylesheet" />

    <script type="text/javascript" src="intro.js"></script>
    <script type="text/javascript" src="angular-intro.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body layout="column" layout-fill ng-app="YourApp" ng-controller="DemoCtrl">
    <div ng-intro-options="IntroOptions" ng-intro-method="CallMe">
      <md-toolbar class="top">
        <div class="md-toolbar-tools">
          <button class="btn btn-large btn-success" ng-click="CallMe();">Demo</button>
        </div>
      </md-toolbar>

      <md-content class="md-padding" flex>
        <div class="step0" layout-xs="column" layout="row">
          <p>Testing</p>
        </div>
      </md-content>

      <md-toolbar class="bottom">
        <div class="md-toolbar-tools">
          <button class="step2 btn btn-large btn-success">Button 1</button>
        </div>
      </md-toolbar>

      <div id="step1" layout-xs="column" layout="row">
          <button class="btn btn-large btn-success">Button 2</button>
      </div>
    </div>

  </body>
</html>

我的DemoCtrl如下：

angular
  .module('YourApp', ['ngMaterial', 'angular-intro'])
  .config(function($mdThemingProvider){

      $mdThemingProvider.theme('default')
      .primaryPalette('blue')
      .dark();

  })
  .controller('DemoCtrl', function ($scope) {

    $scope.IntroOptions = {
      steps:[
      {
          element:  document.querySelector('.step0'),
          intro: 'Testing',
          position: 'right'
      },
      {
          element: '#step1',
          intro: 'Testing',
          position: 'bottom'
      },
      {
          element: '.step2',
          intro: 'Testing 2',
          position: 'right'
      }],
      showStepNumbers: false, 
      exitOnOverlayClick: true, 
      exitOnEsc: true, 
      nextLabel: '<strong>NEXT!</strong>', 
      prevLabel: '<span style="color:green">Previous</span>', 
      skipLabel: 'Exit', 
      doneLabel: 'Thanks'
    };
    $scope.ShouldAutoStart = false;
  });

编辑：所以我已经能够通过从定义 ng-controller 属性的同一元素移动 ng-intro-options 和 ng-intro-method 属性来在我的应用程序中解决这个问题。我从 here 那里得到了这个想法。不过，此修复程序并未修复我的 plunker 示例。而且我现在在我的应用程序中遇到一个问题，当叠加层处于活动状态时，intro.js 会使 md-toolbar 从视图中消失。

Answer 1

您正在加载的一个或多个 AngularJS/AngularMaterial 文件似乎导致了问题：

我用 AM demos

使用的文件替换了您加载的文件

<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>

它似乎有效 - Plunker

注意：rel="stylesheet" 应添加到任何 link 标签，否则不会处理样式。

无法在 angular-material 应用上实施 angular-intro.js

Unable to implement angular-intro.js on angular-material app

javascript

intro.js

angular-material