Start a new topic

Angularjs, setOnUrlInvokeCallback function not callback

Angularjs, setOnUrlInvokeCallback function not callback

Hi I have developed a wikitude plugin for ngCordova that i hope is in process to be added, here is the plugin, for the time been you have to add the module to the dependencies in your main module.

and here is the initial config needed for the plugin.

Can you show us your sample with angular js? , plz

When I trigger "document.location = 'architectsdk://action=closeWikitudePlugin'" on ARchitech js ,
but callback function does't call




app.factory('WikitudeFactory', function($q, $ionicPlatform) {

var world = {

"path": SAMPLE_PATH, 

"requiredFeatures": ,

"startupConfiguration": {

"camera_position": "back"




return {

isDeviceSupported: true,

callARView: function() {

$ionicPlatform.ready(function() { 

app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");



app.wikitudePlugin.loadARchitectWorld(function(loadedURL) {

console.log('load arch success')

}, function errorFn(error) {

console.log('Loading AR web view failed: ' + error);

},world.path, world.requiredFeatures, world.startupConfiguration);



//Callback method

app.wikitudePlugin.setOnUrlInvokeCallback(function(url) {

console.log('url invoked')



},function errorFn(error) {

console.log('Loading AR web view failed: ' + error);

}, world.requiredFeatures);







ps. sorry for my poor english.

Hi there!

The snippet looks fine. Let me just list some bulletpoints I'd check in your project set-up

* Are there any interceptors in place that control urls/page loads (e.g. ui-router or similar)
* Ensure to properly call document.location
  (e.g. document.location = 'architectsdk://action=foo';)
* Debug your Android WebView, maybe a JS error occurred in your code.
* Check sample application and plugin documentation

Kind regards,

Using the Wiktiude JS API togehter with Angular works out of the box.
Include the following in your index.html's head:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

<script src="architect://architect.js"></script>

<base href="">

and configure your Angular controller the way you want, e.g.

<body ng-controller="MainController" >


Your MainController can then use all the AR namespace, compare Wikitude JS API References.

You may even combine your project with Angular Material but be aware that this only works on Android 4.4+ (learn more).
To ease your development flow I recommend to also have a look at Gulp, Bower, Angular Translate, Lodash and ngMock.

I highly recommend to girst run through some Angular tutorials (e.g. CodeSchool or udemy), using Wikitude's features works in any environment.

Note that you need to always ensure your backgroud is transparent, in case of using e.g. Angular Materia you need to have this CSS in place to make it all work:



-webkit-highlight: none;

-webkit-touch-callout : none;

-webkit-user-select: none;


::-webkit-scrollbar {

display: none;


html, body {

background-color: transparent;


background:rgba(0, 0, 0, 0);



i fixed this issue by adding '$q.defer().resolve(url)' inside setOnUrlInvokeCallback.

Login or Signup to post a comment