Issue with UI Page/AngularJS and GlideDialogWindow

Matthew Glenn · ‎11-18-2015

Hey everyone,

Long story short, when I attempt to load a UI Page (w/AngularJS UI Script) in a GlideDialogWindow via a UI Macro, my AngularJS library is not being loaded. I did have a few relevant console errors yesterday but don't seem to be getting them today, but the problem still persists. I can only find one similar post on the community (AngularJS using GlideModal/GlideDialogWindow ). The errors outlined in that post are the exact errors I was receiving (minus the reference to the ngApp/ngController names).

Similar to the post mentioned above, if I go directly to the UI Page, everything loads just fine.

Has anyone seen this before? And more importantly, does anyone have a fix?

tltoulson · ‎11-19-2015

I'm with you on the iFrame hatred. I was taking another look at this problem tonight and I came up with something that seems to work without iframe: manually bootstrapping angular.

Here is a simple example of an angular app in a UI Page or UI Macro.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <!--Note that ng-app is not used-->

   <div id="myAngularApp">

   <p>Input something in the input box:</p>

   <p>Name: <input type="text" ng-model="name"/></p>

   <p ng-bind="name"></p>

   </div>

   <g:requires name="angular.min.jsdbx" />

   <script>

   // You can add your modules like this and include them as a dependency when you call bootstrap

   angular

   .module('test', []);


   // Then you bootstrap by the div id instead of using ng-app

   angular.bootstrap($("myAngularApp"), ["test"]);

   </script>


</j:jelly>

This leads me to believe the issue is with the timing of the angular auto-initialization when it is loaded dynamically by GlideDialogWindow.

View solution in original post

Oliver D_sereck · ‎07-29-2016

Hi Travis,

How did you implement angular.min and which version of angular are you using? No matter if I paste the full angular code into the ui script (version 1.5.8) or using a link to the CDN, this solution is not working 😞

Also which version of SN are you using?

Thanks

Oliver

xMTinkerer · ‎03-06-2017

Hey Oliver!
Oh man! I apparently never replied to you. Sorry about that. Hopefully you got this sorted? To answer your question, we created a new UI Script with this script:

/* jshint -W060 */

document.writeln('<script>https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>');

document.writeln('<script>https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>');

document.writeln('<script>https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>');

Then, we are using two UI Pages, one for the iframe:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <div class="xm-dialog-form">

   <div class="embed-responsive xm-embed-iframe">

   <iframe name="dialog_frame" id="dialog_frame" src="/UI_PAGE_CONTENT.do?sysparm_nostack=true&amp;incident_id=${HTML:sysparm_sysID}" class="embed-responsive-item"></iframe>

   </div>

   </div

</j:jelly>

And the other for the actual content:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<script></script>



<script></script>



<div id="inform" ng-app="myAppName" class="container-fluid" ng-cloak="">

<div ng-controller="informCtlr">

   <h4>{{ TITLE }}</h4>

   <form name="formName" novalidate="">

   <!-- inputs and such here -->

   </form>

</div>

</div>

The angular app is stored in a UI script called UI_SCRIPT_HERE.

I hope that helps! Sorry for taking literally 7 months to get back to you!

Rishi18 · ‎06-27-2017

Hi Travis,

I couldn't understand this.

Did you use manual bootstrapping or Iframe?

Using the manual bootstrap method I get :

Error: ng:btstrpd

App Already Bootstrapped with this Element

Even though I am not using ng-app

and with IFrames

Error: $injector:nomod

Module Unavailable

Can you please add some more clarity to it.

tp13nomad

michal_v · ‎12-28-2017

I'm getting the same thing, could it be related to the instance version? I'm on Istanbul.

Did any one sort this out?

cwilliams · ‎09-21-2018

This helped me get on the right track for Angular UI macros.

I couldn't get controllers to work when using ng-app, bootstrapping with the div id solved this.

Cheers!