1
角度素材アプリでangular-intro.jsを使用することができません。私は単純なプランナーで私のアプリの外でそれを実装しようとしたが、まだ肯定的な結果を持っていない。私が間違っていることを誰かが指摘できますか？角度素材アプリにangular-intro.jsを実装できません
http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview
私は、角-材料のアプリでこれを実装する誰かの例を見つけるためには至っていないが、私は唯一の角度-jsのアプリでそれを見てきました。以下は私の見解です。私のアプリとプランナーの両方でCallMe()は決して呼ばれているようです。
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;
});
EDIT：私のDemoCtrl
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" data-require="[email protected]" 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="[email protected]" data-semver="1.1.0-rc2"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-require="[email protected]" data-semver="1.5.3"></script>
<script src="https://code.angularjs.org/1.5.3/angular-animate.js" data-require="[email protected]" data-semver="1.5.3"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js" data-require="[email protected]" data-semver="1.5.3"></script>
<script src="https://github.com/itzgAndEnenbee" data-require="[email protected]" 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>
は以下の通りですだから私はng-controller属性が定義されていたのと同じ要素からng-intro-optionsとng-intro-method属性を移動することによって、自分のアプリケーションでこの問題を解決することができました。私はhereからこの考えを得ました。しかし、この修正プログラムは私の大胆な例を修正しませんでした。また、オーバーレイがアクティブなときにintro.jsがmd-toolbarを表示から消えるようにするアプリで問題が発生しています。
ありがとうございます！これはPlunkerの問題を修正したようです。あなたの作業の例では、チュートリアルの中で、今では私のアプリケーションで起こっているように、いくつかのボタンが見えなくなっていることに気づいた。なぜこれが今起こっているのかを知る必要があります。 – btathalon
@bartathalon私は恐怖を助けるために角度のイントロについて十分にわかりません。がんばろう！ –