Multiple directives error

[yaronguez]

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

[yaronguez]

I wonder if this has to do with support for Angular 1.3? I see your example uses 1.2 and when I update it to 1.3 I get an error:

Error: [$compile:multidir] http://errors.angularjs.org/1.3.14/$compile/multidir?p0=ngController&p1=ngIntroOptions&p2=new%2Fisolated%20scope&p3=%3Cdiv%20class%3D%22container-narrow%22%20ng-controller%3D%22MyController%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
M/<@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:6:417
Oa@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:66:1
y@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:60:143
ba@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:51:429
ba@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:52:55
ba@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:52:55
F@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:49:436
tc/d/</<@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:18:4
Pe/this.$get</l.prototype.$eval@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:125:301
Pe/this.$get</l.prototype.$apply@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:126:1
tc/d/<@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:17:477
e@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:36:313
tc/d@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:17:1
tc@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:18:179
Jd@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:17:1
@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:249:428
a@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:163:399
lf/c@file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js:32:384

file:///Users/yaronguez/Websites/crypteron/angular-intro.js/bower_components/angular/angular.min.js
Line 102

[mendhak]

Yes I think it has to do with changes in 1.3, see this page. Unfortunately it isn't immediately clear to me what the correct way of isolate scopes is. I'll have a look when I get some time (or a kind soul will create a pull request), but until then it's limited to 1.2

[gmkeith]

This problem is in fact an issue when the controller and directive exist on the same HTML element. The simple fix is to move the intro attribute(s) to another element. From my extremely limited understanding, Angular 1.3 doesn't know what to process first if they exist on the same element. It took the liberty of making a change see here:
https://github.com/gmkeith/angular-intro.js
I can create a pull request for this if you wish.

[solenoo]

@gmkeith I've used your version and now I'm getting

Error: [$compile:nonassign] Expression 'undefined' used with directive 'ngIntroOptions' is non-assignable!

[gmkeith]

@solenoo How are you building and running?
I tried build with the default grunt build and running the example/index.html through IntelliJ/WebStorm and everything seemed fine. Everything seems to be checked in, with the exception of the build artefact.

[yaronguez]

Hi guys, I just wanted to check back in on this. Were you all able to get this working with Angular 1.3? I've been using ng-joyride and running into all kinds of issues. I have yet to find a stable and robust onboarding plugin for Angular 1.3.

[Purus]

I am facing the same issue when using this with Ionic code.

Error: [$compile:multidir] Multiple directives [ionTabs, ngIntroOptions] asking for new/isolated scope on: <ion-tabs class="tabs-icon-top tabs-color-active-positive pane tabs-bottom tabs-standard" ng-intro-options="IntroOptions" ng-intro-autostart="true" nav-view="stage" style="-webkit-transition-duration: 0ms; transition-duration: 0ms; opacity: 1; -webkit-transform: translate3d(0%, 0px, 0px);">

[CrouseMatthew]

Following gmkelth's suggestion solved the issue for me.

[ismaelgcosta]

Hi, I'm using angular intro with the angular 1.3.15 and I didn't have troubles yet. So I think it's compatible both angular 1.2 and angular 1.3

[olive75]

With angular 1.3.15, this solved the $compile:multidir error for me:

<div ng-controller="StartTourCtrl">
      <div 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-onafterchange="AfterChangeEvent"
           ng-intro-autostart="ShouldAutoStart">
       ... 
      </div>
</div>

[Alexandre-io]

#63 should fix your issue

[brunowego]

I get this issue again with 1.4.9 version of angular.

[timelf123]

Confirmed with 1.5.0 - the fix is #50 (comment) separate your ng-controller and ng-intro* attrs into different elements

[anatoly314]

Same issue if creating a custom directive to use together with ng-intro-options for example to customize its behavior.

[millerscout]

on the latest version 3.1.1 #112 it's possible to use the service directly, you may take advantage of using the controller only to manipulate the introJs.

i'll close this, but if you need further help tell me, i'll try to help you asap.