CODEWITHSUNDEEP
angularjs
darren.roberts
darren.roberts

Reputation: 1

Angular JS - calling angular from a third party callback function

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

Upvotes: 0

Views: 223

Answers (2)

7uc4
7uc4

Reputation: 194

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

Upvotes: 1

joshua miller
joshua miller

Reputation: 1756

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

Upvotes: 1

Related Questions