【发布时间】：2016-08-30 20:23:47
【问题描述】：
我无法在我的 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 从视图中消失。
【问题讨论】：
标签： javascript angular-material intro.js