mendhak / angular-intro.js Goto Github PK

The context of the onchange callbacks is the IntroJs instance:

intro.onchange(function(targetElement){
    console.log(this); // IntroJs 
    $timeout(function() { scope.ngIntroOnchange(targetElement)});
});

We could apply this to all the callbacks some like this:

intro.onchange(function(targetElement){
    $timeout(scope.ngIntroOnchange.bind(this, targetElement, scope));
});

This will apply the context of the IntroJs instance, pass the targetElement, as well as the scope as an optional second parameter.

$scope.onChange = function(targetElement, scope) {

  // expand a panel
  angular.element('#panel-a').trigger('click');

  // refresh
  this.refresh();
};

I am sure that i have done everything
but still got this problem
Is there any way to fix this? Thanks

I get this error when using grunt build
Warning: Unable to read "dist/public/bower_components/angular-intro.js" file (Error code: EISDIR). Use --force to continue.

Is this because this library ends with .js

We should have this goodie be available via bower/component, for ease of use.

Here is a plunker:
http://plnkr.co/edit/Hp6XGMvcchqDoU1GtZ4D?p=preview

Is this a problem with the directive or intro.js...
But if there is a element in a dropdown it goes to some wacky place rather than the specific position of the element.

Hi there, I've copied your example directives and scope methods and get the following console error on page load:

Error: [$compile:multidir] Multiple directives [ngController, ngIntroOptions] asking for new/isolated scope on: http://errors.angularjs.org/1.3.5/$compile/multidir?p0=ngController&p1=ngIntroOptions&p2=new%2Fisolated%20scope&p3=%3Chtml%20ng-app%3D%22crypteron%22%20ng-controller%3D%22AppCtrl%22%20ng-intro-options%3D%22introOptions%22%20ng-intro-method%3D%22CallMe%22%20ng-intro-oncomplete%3D%22CompletedEvent%22%20ng-intro-onexit%3D%22ExitEvent%22%20ng-intro-onchange%3D%22ChangeEvent%22%20ng-intro-onbeforechange%3D%22BeforeChangeEvent%22%20ng-intro-onafterchange%3D%22AfterChangeEvent%22%20ng-intro-autostart%3D%22ShouldAutoStart()%22%3E minErr/<@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:63:12 assertNoDuplicate@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:7921:1 applyDirectivesToNode@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:7251:1 compileNodes@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:6931:15 compile@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:6838:15 bootstrapApply/<@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:1439:11 $RootScopeProvider/this.$get</Scope.prototype.$eval@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:14291:16 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:14389:18 bootstrapApply@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:1437:9 invoke@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:4138:14 bootstrap/doBootstrap@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:1435:1 bootstrap@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:1455:1 angularInit@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:1349:5 @http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:25912:5 trigger@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:2722:7 createEventHandler/eventHandler@http://my.crypteron.dev:86/vendor/angular/angular.js?v=201412042317:2992:9

What am I doing wrong? Thanks!
Yaron

Original intro.js supports step number in top left corner. I don't see it in ng-intro example. Is it possible to add it?

I have a page that requires multiple separate introjs flows that are triggered by various actions. So for example the user will land on the page and immediately view the first help flow. Then if they used the search bar... when a search is executed another help flow will begin.

My strategy for doing this so far is when the search is executed I change the steps in my options object and re-call the ng-intro-method. This works fine if the user dismissed the first flow but if they execute a search while it's open there are conflicts between the two intro flows.

Is there a good way to call the method that the exit button does from within a controller? Or otherwise destroy the introjs instance?

Can you push this package out to the NPM repo? My job requires that I can only use packages from NPM.

I'm using webpack and require to handle dependencies. I was finally able to get it working by changing angular-intro.js to the following:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(["angular", "intro.js"], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory(require('angular'), require('intro'));
    } else {
        root.angularIntroJs = factory(root.angular, root.introJs);
    }
}.....

That is, with intro.js, instead of intro for the line define(["angular", "intro.js"], factory);

and requiring like so:
require('angular-intro.js)

I also had to manually install intro.js via npm.

Is there a reason why the code is requiring intro as opposed to intro.js? How can I get it to work without augmenting the library code? Thank you for your time!

The link "app" at the bottom of the page is broken.

Link should be: https://github.com/mendhak/angular-intro.js/blob/master/example/app.js

Just tried the demo and i noticed it doesn't have smooth scrolling. So when you go from step 3 to 4, it shifts immediately. This will confuse the users and thus making it scroll smoothly between steps would be an improvement.

Any word on adding this in the future?

How do I go about calling the next step in the intro? I am angular-intro to allow users to actual perform functional steps in my app and when each step is successfully complete, the intro moves onto the next step automatically.

To do this I am using CallMe within the angular controller, but doing that starts a new tutorial on top of the previous one each time.

Is there a method to call the next step (equivilant to the introJs().start().nextStep() ) rather than the CallMe?

I checked out the example & read the docs, but my Angular.js app is returning $scope.CallMe is not a function.

My HTML w/Angular looks like so:

<body ng-controller="ApplicationController" ng-intro-options="IntroOptions" ng-intro-method="CallMe">
</body>

And then in ApplicationController I call the CallMe method which logs this to the console: $scope.CallMe is not a function

The underlying intro.js library is built under the assumption that a navigation change is going to destroy the content of the page, including any open tours. This is not true for single page angular apps. If the user reaches a tour, then clicks the back button, they end up with an unrelated tour sitting on their page.

If you navigate between two pages with introjs tours, you can leave the introjs overlay on the page, blocking further user interaction.

I am trying to get the introduction go through multiple pages. I am using ui-router. I check if a certain step is reached and using $state.go, I go to the next page. However, when I check the DOM for the element on the new page it is isn't there. Therefore the label for the step on the new page ends up showing on a random place.

Is there a way around this? Thanks

Angular translate: after change language hints are still in prev. language.
How to solve it?

Has anyone noticed that when placing id='step1' on an image or text, angular-intro.js will place a white transparent section which covers the content? I want the content to pop, not be covered up.

Any idea what I might have done wrong?

Has anyone else encountered this and know of a work around? or fix?

How to achieve something like this?

$scope.IntroOptions = {
steps:[
{
element: '#step1',
intro: "/template.html"
},
}

Currently the package name (bower.json) is angular-intro.js, when installed via bower it created bower_components/angular-intro.js/ this casues an issue with RequireJs because it doesn't evaluate this path properly.

requirejs.config({
  paths: {
    'angular-intro': '../bower_components/angular-intro.js/build/angular-intro.min',
  },
  shim: {}
});

On executing somehow it tries to resolve the following url

http://localhost:8080/intro.js

If I remove the .js from the folder name, things are back to normal.

Is it possible to update this to just angular-intro and re-publish? If not, I will have to fork and publish.

It doesn't work for me with angular 1.4.8. No error's in the log, but on click nothing happens.
Anyone else having this problem?

My mistake: got it working...

It seems not working well when content is inside a template

That is, content is pull in using ngView, ngInclude directive. And intro.js text just show in the middle of the page instead of pointing to the element.

Hey dude,

I'm Afshin, the author of IntroJS. Thanks for integrating introjs with AngularJS. I'm planning to release the v1.0.0 in next days, you can upgrade your tool as well.

Cheers,
Afshin

Hello, sorry for poor english.

I want call the init function on the controller, but when I do this the first step is in the wrong position.

When I click on the next steps and back, the position is right.

Any suggestions? Is a bug?

Thanks

First of all, thanks for the great plugin. I'm trying to apply your plugin with my project for a few hours and having some problems which is when the ng-* attributes got updated inside a ng-click, your plugin always takes old values of the ng-* attributes. For example,

HTML:

   <div class="container-narrow" ng-controller="MyController"
     ng-intro-options="IntroOptions" ng-intro-method="CallMe"
     ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
     ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
     ng-intro-autostart="false">
   <button class="btn btn-large btn-success" ng-click="foo();">Demo</button>

Controller:

  $scope.foo = function() {
    $scope.IntroOptions = {
      steps: [{
        element: document.querySelector('#step1'),
        intro: "This is the first tooltip."
      }, {
        element: document.querySelectorAll('#step2')[0],
        intro: "<strong>You</strong> can also <em>include</em> HTML",
        position: 'right'
      }],
      showStepNumbers: false,
      showBullets: false,
      exitOnOverlayClick: true,
      exitOnEsc: true,
      nextLabel: '<strong>NEXT!</strong>',
      prevLabel: '<span style="color:green">Previous</span>',
      skipLabel: 'Exit',
      doneLabel: 'Thanks'
    };
    $scope.CallMe(); // At this point, your scope.IntroOptions, inside the link function, will be undefined
  };

Please see this problem in action on this Plunkr.

IMHO, I think that you should apply a $watch in all these attributes, for example:

        link: function(scope, element, attrs) {
            scope.$watch('ngIntroOptions', function(old, new){
                if(old !== new)
                    scope.ngIntroOptions = new;
            });
        }

Hi, i am developing a project that uses intro.js, and i use your directive, but i make some changes, as work with isolate scope.
I saw that the code there is a TODO for that, and if you want I can make a pull request.

If you target an element whose content/height changes programmatically, the introjs-helperLayer does not resize appropriately when the underlying data changes.

Intro.js has a 'refresh' method that could be used to handle this, but as far as I can tell this directive doesn't expose a reference to the 'intro' object.

So I want to start the tour on page load but could not find a way to do this through the directive with the way it currently is. In other words user action is required to get started.. or am I missing something?

Hi,

I want to change e.g. the scope, change the route of angular, or click on a button,
before continuing after beforechange event of intro.js
to make intro.js find the DOM element.

Is there any best practice?

Hey,

Please update your intro.js version to v1.1.0: https://github.com/usablica/intro.js/releases

Thank you,
Afshin

Hi ,
This is more of a request rather than an issue..

Is it possible to specify the text inside the HTML.
something like this:

<a href='http://google.com/' ng-intro-text='Hello step one!'></a>

This can be useful when you want to use I18n in your HTML

Hi,
I want to skip the element if that element is not defined. Is this possible? I have tried introJs().next() as well as introJs().goToStep() method. But none of them worked for me.. Can you please help me here..

Hey, maintainer(s) of mendhak/angular-intro.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library mendhak/angular-intro.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "mendhak/angular-intro.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Is there a way to use ng-click inside the injected html injected in the popup. I tried using ng-click to call a function in the controller but it doesnt seem to work. I am not sure if I am missing something. Thanks

I want to skip the step that has the ng-show property on it because the ng-show makes that particular step display: none. how to do this?

This issue is referred in #50 but without any idea how solve this. Any idea how solve it? 😩

angular.js:10126 Error: [$compile:nonassign] Expression 'undefined' used with directive 'ngIntroOptions' is non-assignable!
http://errors.angularjs.org/1.2.28/$compile/nonassign?p0=undefined&p1=ngIntroOptions
    at angular.js:78
    at parentSet (angular.js:6660)
    at Object.parentValueWatch (angular.js:6674)
    at Scope.$digest (angular.js:12642)
    at Scope.$apply (angular.js:12915)
    at angular.js:1447
    at Object.invoke (angular.js:3965)
    at doBootstrap (angular.js:1445)
    at bootstrap (angular.js:1459)
    at angularInit (angular.js:1368)(anonymous function) @ angular.js:10126(anonymous function) @ angular.js:7398Scope.$digest @ angular.js:12669Scope.$apply @ angular.js:12915(anonymous function) @ angular.js:1447invoke @ angular.js:3965doBootstrap @ angular.js:1445bootstrap @ angular.js:1459angularInit @ angular.js:1368(anonymous function) @ angular.js:22149fire @ jquery.js:3099self.fireWith @ jquery.js:3211jQuery.extend.ready @ jquery.js:3417completed @ jquery.js:3433
angular.js:10126 TypeError: scope.ngIntroMethod is not a function
    at angular-intro.js:119
    at angular.js:14417
    at completeOutstandingRequest (angular.js:4411)
    at angular.js:4725(anonymous function) @ angular.js:10126(anonymous function) @ angular.js:7398(anonymous function) @ angular.js:14420completeOutstandingRequest @ angular.js:4411(anonymous function) @ angular.js:4725

Details

jQuery v2.1.1
Angular v1.2.28
Angular Intro.js v1.2.x/.1.3.x (both with same issue)

Thanks! 👽

After completing the intro, the element

<div class="introjs-overlay" style="top: 0;bottom: 0; left: 0;right: 0;position: fixed;opacity: 0.8;"></div>

remains in the DOM tree, shadowing the content. Not sure if this issue is due to angular-intro.js or intro.js itself.

Why is the callback for ng-intro-onbeforechange called via $timeout? That means the callback is not called before change, but will happen after the change has already happened, making it not very useful. Is there something I'm missing? It seems for at least this callback, it should be called synchronously, which is what intro.js does.

I'm unable to update this project as often as I'd like. Luckily there have been quite a few pull requests which are easy enough to deal with. If you're interested in helping out, please comment here.

Basically it would be things like addressing issues, bugfixes, and making sure new features in intro.js versions will work!

Hey there,

when using the tour from e.g. a factory it doesn't assign to the intended scope.

Here's a example of it: http://plnkr.co/edit/maDdNKSadoHmkpuwH57R?p=preview

The fix for that would be to $parse the attributes or use a isolated scope, but the isolated scope requires angular 1.2.

So if you would like to see a pull request for the $parse solution, let me know.

Hello. When i write in html:

ng-intro-exit-method="ExitMe"

and exit my intro i get:

TypeError: undefined is not a function at Scope.link.scope.ngIntroExitMethod [as ExitMe] (angular-intro.js:92

so seems that this code:

scope.ngIntroExitMethod = function (callback) { intro.exit(); callback(); };
must be transformed to:

scope.ngIntroExitMethod = function (callback) { intro.exit(); };

check this out please asap)

also second small question: is it real to put confirm action on exit button?

Hey there guys,

This might be a long shot but can one change introjs options on the fly with binding? I already tried this and is does not seem to work. Although I think It should be easy to do since the introjs instance should just be destroyed and re-created with the new options, right?

I am trying to dynamically set up a set of new intro steps (imagine a tour for a wizard with a new set of tour steps for each wizard step). I managed to hack some terrible code together in my controller to (almost) do this.

What do you guys think?

Can the bower.json be changed to depend on the latest 2.0 of intro.js please?

Any help would be appreciated.

Not sure if this is a angular-intro.js problem per se... but definitely more relevant to the dynamic nature of angular.

I have an intro that instructs the user to interact with the webpage in a few places. For example, in one case the user clicks on a button, triggering an ng-click, that adds a new html element it the page (inside an ng-repeat). Later in the introduction steps I refer to the new element. However, because this element did not exist when the intro was started if does not point to the current element. IntroJS appears to create references to the elements at start (https://github.com/usablica/intro.js/blob/master/intro.js#L95). I got around this by adding the following onbeforechange callback:

    $scope.introChange = function() {
      var intro = this;

      for (var i = intro._currentStep+1; i < this._options.steps.length; i++) {
        var currentItem = intro._introItems[i];
        var step = intro._options.steps[i];
        if (step.element) {
          currentItem.element = document.querySelector(step.element);
          currentItem.position = step.position;
        }
      }

    };

I hope this helps others or maybe should be an optional part of angular-intro.js.

Best described in the image below:

Notice that I'm on step 3 (clicked the "Start at step 3" button) but the first dot is highlighted. Not sure if this is a demo or library issue.

when i try to use it in my project.(using angular 1.3.2),there are some Error，like this:

Error: [$compile:multidir] Multiple directives [ngController, ngIntroOptions] asking for new/isolated scope on: <div class="container" ng-controller="MyController" ng-intro-options="IntroOptions" ng-intro-method="CallMe" ng-intro-autostart="ShouldAutoStart">
http://errors.angularjs.org/1.3.11/$compile/multidir?p0=ngController&p1=ngIntroOptions&p2=new%2Fisolated<div ui-view="" class="ng-scope">cope&p3=%3Cdiv%class%3D%container%22%20ng-controller%3D%22MyController%22%20ng-intro-options%3D%22IntroOptions%22%20ng-intro-method%3D%22CallMe%22%20ng-intro-autostart%3D%22ShouldAutoStart%22%3E
    at REGEX_STRING_REGEXP (http://localhost:8080/scsp/bower_components/angular/angular.js:63:12)
    at assertNoDuplicate (http://localhost:8080/scsp/bower_components/angular/angular.js:7994:15)
    at applyDirectivesToNode (http://localhost:8080/scsp/bower_components/angular/angular.js:7324:15)
    at compileNodes (http://localhost:8080/scsp/bower_components/angular/angular.js:6997:15)
    at compile (http://localhost:8080/scsp/bower_components/angular/angular.js:6904:15)
    at compile (http://localhost:8080/scsp/bower_components/angular-ui-router/release/angular-ui-router.js:3893:20)
    at invokeLinkFn (http://localhost:8080/scsp/bower_components/angular/angular.js:8217:9)
    at nodeLinkFn (http://localhost:8080/scsp/bower_components/angular/angular.js:7726:11)
    at compositeLinkFn (http://localhost:8080/scsp/bower_components/angular/angular.js:7075:13)
    at publicLinkFn (http://localhost:8080/scsp/bower_components/angular/angular.js:6954:30)angular.js:11598 (anonymous function)angular.js:8548 $getangular.js:8219 invokeLinkFnangular.js:7726 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:6954 publicLinkFnangular-ui-router.js:3839 updateViewangular-ui-router.js:3807 directive.compileangular.js:8217 invokeLinkFnangular.js:7726 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:7721 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:6954 publicLinkFnangular-ui-router.js:3905 compileangular.js:8217 invokeLinkFnangular.js:7726 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:6954 publicLinkFnangular-ui-router.js:3839 updateViewangular-ui-router.js:3807 directive.compileangular.js:8217 invokeLinkFnangular.js:7726 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:7078 compositeLinkFnangular.js:6954 publicLinkFnangular-ui-router.js:3905 compileangular.js:8217 invokeLinkFnangular.js:7726 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:6954 publicLinkFnangular-ui-router.js:3839 updateViewangular-ui-router.js:3801 (anonymous function)angular.js:14707 $get.Scope.$broadcastangular-ui-router.js:3218 $state.transitionTo.$state.transition.resolved.then.$state.transitionangular.js:13175 processQueueangular.js:13191 (anonymous function)angular.js:14388 $get.Scope.$evalangular.js:14204 $get.Scope.$digestangular.js:14493 $get.Scope.$applyangular.js:9650 doneangular.js:9840 completeRequestangular.js:9781 requestLoaded

does this not match angular 1.3.2?

I am trying to use angular-intro with requireJS.

Steps I followed till now:

1. Installed angular-intro using bower as, bower install anuglar-intro.js --save
2. Added intro.js and angular-intro.js into requireJS "main" file, in the same order.
3. Added [ 'intro' , 'angular'] as "deps" for angular-intro.
4. set ng-intro-autostart="true"

But when I run my server, even after the successful loading of intro.js and angular-intro.js file in this order, I am getting an error as,
ReferenceError: introJs is not defined

I don't understand how angular-intro can't find introJs function, even if intro.js has been added prior to it? What is the right way to add both of these files so that it works properly?

I am having several problems with it recently