угловая директива не отображается в представлении, но появляется на консоли

Question

У меня есть код, как показано ниже, код является угловой директивой. Код используется для вычисления расстояния между двумя местами с помощью координат, моя проблема - результат директивы (scope.hasil = dist) не отображается в представлении, а отображается в консоли (console.log(dist)). Что я должен делать, чтобы результаты могли отображаться в поле зрения? спасибо :)

директива

dir.directive('distance', function() { 
var calcRoute = function(ori,dest,cb) { 
     var dist; 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
    var request = { 
     origin:ori, 
     destination:dest, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      cb(null, response.routes[0].legs[0].distance.value/1000); 
     } 
     else { 
      cb("error"); 
     } 
    }); 
}; 
return{ 
    restrict:"E", 
    scope: true, 
    template:"{{hasil}} km", 
    link: function(scope, elm, attrs) { 
     var ori = attrs.ori; 
     var dest = attrs.dest; 
     calcRoute(ori,dest, function (err, dist) { 
      if (!err) { 
       scope.hasil = dist; 
       console.log(dist); 
      }else{ 
       scope.hasil = err; 
      } 
    }); 
    } 
}; 
}); 

вид

<distance ori="-7.048443, 110.441022" dest="-7.048264, 110.440388"></distance> 

Answer 1

Используйте $scope.$apply, чтобы обновить вид после изменения свойства:

scope.$apply(function() { 
    scope.hasil = dist; 
}); 

Когда вызывается функция link, DOM фактически заполняется. Поэтому изменение значения scope не будет повторно отображать DOM по умолчанию. Использование $apply вызовет еще один цикл $digest и обновит представление.

Answer 2

@ Ответ на радость, вероятно, самый правильный. Кроме того трюк моя команда имеет преимущество иметь $ применять автоматически запускаться использовать $ таймаут так:

$timeout(function() { 
    calcRoute(ori,dest, function (err, dist) { 
      if (!err) { 
       scope.hasil = dist; 
       console.log(dist); 
      }else{ 
       scope.hasil = err; 
      } 
    }); 
});