我无法在我的 Angular-Material 应用程序上使用 Angular-intro.js。我尝试在我的应用程序之外的一个简化的插件上实现它，但仍然没有取得积极的结果。谁能指出我做错了什么？？
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-intro-options 和 ng-intro-method 属性来解决这个问题。定义了 ng-controller 属性。我从 here 得到这个想法。不过，这个修复并没有修复我的 plunker 示例。而且我现在的应用程序中遇到了一个问题，当叠加层处于事件状态时，intro.js 会使 md-toolbar 从 View 中消失。
最佳答案
看起来您正在加载的一个或多个 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 标记中，否则样式不会被处理。
关于javascript - 无法在 Angular-Material 应用程序上实现 Angular-intro.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39236482/