Angular JS -从第三方回调函数调用angular

Question

我有一个Angular 1.3应用程序，已经升级到1.6了，现在有几个函数不能用了。

这些函数在一个普通的JS脚本中调用，该脚本从一个控制器内部调用，以转发到另一个控制器和视图。

这是我的状态：

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

下面是我的vanilla JS脚本中的代码(它使用第三方库(一个地图)来呈现实际的视图)。

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

链接是不可点击的，因此不会在控制器内调用navigate.The JS函数，添加到下面.....

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

}

}

任何值得欣赏的想法……

Answer 1

可能，这是sanitize的问题。你必须信任你的代码。仔细做这件事。

看看这里：$sce

我认为你应该使用像这样的东西：

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

在控制器中

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

Answer 2

我在上面的代码中看不到从控制器调用getTrackLink函数的任何地方。但是，作为一种解决方案，请尝试添加：

$rootScope.apply()

就在getTrackLink函数被调用之后。

如果函数是异步的，您可以尝试包装函数调用：

$rootScope.$apply(getTrackLink());