Angular JS - calling angular from a third party callback function - angularjs

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.....

Answer 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());

Answer 2

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);