Angular JS - calling angular from a third party callback function

Question

I have an Angular 1.3 application that has been upgraded to 1.6, and now a couple of functions dob't work.

These functions are called within a vanilla JS script that is called from within a controller, to forward onto another controller and view.

Here I my state:-

.state('track', {
    url: '/:area /:trackId /:type',
    parent: 'tracks',
    component: 'trackDetails'
})

And here is my code within my vanilla JS script (which uses a third party library (a map) to render the actual view).

function getTrackLink(track) {
    trackLink = "<div><a ui-sref=\"tracks/track({area:" + track.area + " + /trackId:"
            + track.id + "/type:" + track.type + " })\">" + track.name
            + "</a></div>";

    console.log(trackLink);

    return trackLink;
}

The links aren't clickable, and therefore won't navigate.The JS function is called within the controller, added below.....

function MapCtrl($rootScope, $http, $stateParams, SearchOp, SearchResultsService, $state) {

const vm = this;

console.log('MapCtrl called');

console.log("stateParams:"+$stateParams);

vm.results = null;
vm.loading = true;

let latitude = 0;
let longitude = 0;
let distance = 0;
let currentZoom = 7;

if ($stateParams && typeof ($stateParams.latitude) !== 'undefined') {
    latitude = $stateParams.latitude;
    longitude = $stateParams.longitude;
    distance = $stateParams.distance;

    SearchResultsService.set(latitude, longitude, distance);

    $rootScope.searchPerformed = true;

} else if (!$rootScope.searchPerformed) {

    console.log("Defaulting co-ordinates to user's home town");
    latitude = $rootScope.currentLatitude;
    longitude = $rootScope.currentLongitude;
    distance = $rootScope.currentDistance;
    SearchResultsService.set(latitude, longitude, distance);

    $rootScope.searchPerformed = true;

} else {
    console.log('Rendering last search results');
}

console.log(`Search Params: ${latitude} : ${longitude} : ${distance}`);

SearchResultsService.get().then(data => {
    vm.loading = true;
    console.log(`Retrieved data from service: ${data}`);
    vm.results = data;
    loadMap(vm.results, currentZoom, $state);
    vm.loading = false;
}).catch(error => {
    vm.loading = false;
    vm.status = 'Unable to load trackdata: ' + error.message;
});


vm.search = (latitude, longitude, distance, currentZoom) => {

    vm.loading = true;

    SearchResultsService.set(latitude, longitude, distance);

    SearchResultsService.get().then(data => {

        console.log(`Retrieved data from service: ${data}`);
        vm.results = data;
        console.log("SearchResults"+ data);
        loadMap(vm.results, currentZoom);
        vm.loading = false;
    }).catch(error => {
        vm.loading = false;
        vm.status = 'Unable to load trackdata: ' + error.message;
    });

}

}

Any ideas appreciated.....

How is the getTrackLink function called? Do you call it from within the angular component controller? — joshua miller
– joshua miller, Commented Jan 28, 2018 at 19:46

joshua miller · Accepted Answer · 2018-01-29 14:21:42Z

1

I don't see anywhere in the above code where the getTrackLink function is called from the controller. However as a solution, try adding:

$rootScope.apply()

Just after the getTrackLink function is called.

If the function is async, you can try wrapping the function call instead:

$rootScope.$apply(getTrackLink());

edited Jan 29, 2018 at 14:21

answered Jan 29, 2018 at 12:25

joshua miller

1,7661 gold badge15 silver badges24 bronze badges

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

1 Comment

darren.roberts Over a year ago

Its getting called as part of a much larger scripts (LoadMap) of which getTrackLink() is a sub function. Thanks I'll give that a go...

7uc4 · Accepted Answer · 2018-02-06 12:25:22Z

1

Probably, this is a problem with the sanitize. You have to trust your code. Do it carefully.

Have a look here: $sce

I think that you should use something like:

<div ng-bind-html="vm.something"></div>

In the controller

vm.something = $sce.trustAsHtml(vm.somethingUntrasted);

edited Feb 6, 2018 at 12:25

answered Jan 28, 2018 at 14:53

7uc4

1941 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angular JS - calling angular from a third party callback function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related