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

Question

I am unable to use angular-intro.js on my angular-material app. I have tried to implement it outside my app on a simplified plunker and still have not had positive results. Can anyone point out to me what I am doing wrong ??

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

I have yet to find an example of someone implementing this on an angular-material app, I have only seen it on an angular-js app. Below is my view. In both my app and the plunker CallMe() never seems to be called.

<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>

My DemoCtrl is below:

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 I have been able to fix this in my application by moving the ng-intro-options and ng-intro-method attributes from the same element where the ng-controller attribute was defined. I got this idea from here. This fix did not fix my plunker example, though. And also I am now having an issue in my app where intro.js makes a md-toolbar disappear from view when the overlay is active.

camden_kid · Accepted Answer · 2016-09-01 15:14:05Z

1

It looks like one or more AngularJS/AngularMaterial files you are loading is causing a problem:

I replaced the files you load with those used by the 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>

and it seems to work - Plunker

Note: rel="stylesheet" should be added to any link tag otherwise the style is not processed.

edited Sep 1, 2016 at 15:14

answered Sep 1, 2016 at 14:52

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

btathalon Over a year ago

Thank you !! This seems to have fixed the issue in my Plunker. I noticed that on your working example that during the tutorial some buttons disappear from view just as is happening in my application now. I need to find out why this is happening now.

camden_kid Over a year ago

@bartathalon I don't know enough about angular-intro to help I'm afraid. Good luck!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related