Calling angular function from swift

Question

I'm trying to pass a value from swift to angularJS. The following is the swift code that calls the javascript function:

let userScriptSetToTrue = WKUserScript(
    source: "setTrackingToggleToTrue();",
    injectionTime: WKUserScriptInjectionTime.AtDocumentEnd,
    forMainFrameOnly: true
)
contentController.addUserScript(userScriptSetToTrue)

...
let js = "setTrackingToggleToTrue();"
self.webView?.evaluateJavaScript(js) {
     (_, error) in print(error)
}

And then the javascript calls the angular controller function:

<script>
    function setTrackingToggleToTrue() {
        angular.element(document.getElementById('trackingToggle')).scope().setTracking(true);
    }
</script>

But I got the following error in the javascript side:

TypeError: undefined is not an object (evaluating 'angular.element(document.getElementById('trackingToggle')).scope().setTracking')

It seems the document.getElementById('trackingToggle') is not available but I can see the following in the safari web inspector elements tab

<div class="list-group-item">
    <tracking-toggle-button
            id="trackingToggle"
            state="trackingEnabled"
            class="pull-right"
            on-toggle="updateTrackingPreference(newState);">
    </tracking-toggle-button>
    <label class="tracking-label">My Location</label>
</div>

What would be the reason for this error? or is there a better way to pass a value from swift all the way to angular controller?

Update The angular app is using UI routing and loads page content from different templates based on routing. I later find out the function setTrackingToggleToTrue() is called before its template is loaded and thus no trackingToggle is available at function call. Is there another way to call an angular function outside the controller without referencing any document element?

Thanks.

try angular.element(document).find('trackingToggle') Instead of document.getElementById('trackingToggle') — Varit J Patel
– Varit J Patel, Commented Jul 29, 2016 at 18:43
I still run into the same error: `undefined is not an object (evaluating 'angular.element(document).find('trackingToggle').scope().setTracking') — Jane Zhao
– Jane Zhao, Commented Jul 29, 2016 at 18:50

Community · Accepted Answer · 2017-05-23 10:28:44Z

1

It turns out WKWebView.evaluateJavaScript() can only call javascript on the top scope. The called top scope javascript can't use angular.element() to call an angular controller function based on an element loaded from a template based on routing.

I end up using an awkward way to work around it. The top scope java script set the toggle button value in local storage and the angular controller function will check the value till it's available. I also have to use $scope.$apply() manually to reflect the change in UI.

The same might be achieved via promise. I'll try the promise way later.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Aug 1, 2016 at 11:05

Jane Zhao

516 bronze badges

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

Comments

Varit J Patel · Accepted Answer · 2016-07-29 19:14:19Z

0

Please find working fiddle here: http://jsfiddle.net/varit05/06Ldnys8/25/

Controller:

var app = angular.module('app', []).controller('ctrl', function($scope) {
  $scope.inside = { 'name': 'guy', 'idk': 'blah' };
  $scope.abc = function(value) {
    console.log(value);
  }
});

var getStuff= function() {
  var outside = angular.element(document.getElementById('stuff')).scope().abc('called');
 //console.log(outside.inside)
}

HTML:

<div ng-app="app" ng-controller="ctrl" id="stuff">
</div>

<button onclick="getStuff()">get stuff</button>

Hope it helps you!

Cheers!

answered Jul 29, 2016 at 19:14

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

5 Comments

Jane Zhao Over a year ago

Thanks for the fiddle. I also feel it should work but somehow I keep getting the same error. Maybe it's not caused by the trackingToggle not available but something else.

Varit J Patel Over a year ago

Can you try calling true inside single quote. I too got the undefined error.

Jane Zhao Over a year ago

I add single quotes to true but nothing changed.

Varit J Patel Over a year ago

Can you please post the error or can you please create a plunker for your problem?

Jane Zhao Over a year ago

I added an update to the question. The reason was the function was called before trackingToggle element is loaded.

Collectives™ on Stack Overflow

Calling angular function from swift

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related