Ich kann angular-intro.js nicht auf meiner Angular-Material-App verwenden. Ich habe versucht, es außerhalb meiner App auf einem vereinfachten Plünderer zu implementieren und habe immer noch keine positiven Ergebnisse gehabt. Kann mir jemand darauf hinweisen, was ich falsch mache ??Angular-Intro.js auf Angular-Material-App kann nicht implementiert werden
http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview
Ich habe noch ein Beispiel für jemanden, die Umsetzung dieses auf einem Winkel-Material App zu finden, ich habe es nur auf einem Winkel-js app gesehen. Unten ist meine Ansicht. Sowohl in meiner App als auch im Plotter scheint CallMe() nie aufgerufen zu werden.
<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>
Mein DemoCtrl ist unten:
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: So konnte ich dies in meiner Anwendung beheben, indem die ng-intro-options und ng-intro-method Attribute aus dem gleichen Elemente zu bewegen, wo das ng-controller Attribut definiert wurde. Ich habe diese Idee von here. Dieser Fix hat mein Fallbeispiel jedoch nicht behoben. Und ich habe jetzt ein Problem in meiner App, wo intro.js ein md-toolbar verschwinden aus der Sicht, wenn das Overlay aktiv ist.
Vielen Dank !! Dies scheint das Problem in meinem Plunker behoben zu haben. Mir ist aufgefallen, dass bei dem Arbeitsbeispiel einige Schaltflächen aus der Ansicht verschwinden, so wie es jetzt in meiner Anwendung geschieht. Ich muss herausfinden, warum das jetzt passiert. – btathalon
@barthalhalon Ich weiß nicht genug über Winkel-Intro, um zu helfen, ich habe Angst. Viel Glück! –