Angular代码没有显示在html页面上

Angular Code not showing up on html page

本文关键字：html 显示 代码 Angular      更新时间：2023-09-26

我已经纠结了2个小时了，找不到解决方案。下面是chrome开发工具显示日志的输出。

(为了)

1 - check

2 -一个Google用户

为什么在我的html的地方变量不被更新为"一个谷歌用户"?

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', '$log',
  function($scope, $http, $log) {
    var request = {
      placeId: 'ChIJX3piIfJ4j4ARXuQlqgn6LaA' //Walmart HQ
    };
    service = new google.maps.places.PlacesService(map);
    service.getDetails(request, function(place, status) {
      $log.log('1 - check');
      $log.log('2 - ' + place.reviews[0].author_name);
      $scope.place = place.reviews[0].author_name;
   });
    $log.log('3 - ' + $scope.place);
  }
]);

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Place details</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js'></script>
  <script src="app.js"></script>
</head>
<body>
  <div id="map"></div>
  <div ng-controller='AppCtrl'>
    {{ place }}
  </div>
  </div>
</body>
</html>

google.maps.places.PlacesService不是内置的异步处理程序，您需要在异步调用后运行$scope.$apply。使用$scope.$apply更新视图:

$scope.$apply(function () {
    $scope.place = place.reviews[0].author_name;
});

更新1

检查$apply:

$apply()用于在angular框架之外执行angular中的表达式。(例如从浏览器DOM事件，setTimeout, XHR或第三方库)。因为我们是在调用angular框架，所以我们需要执行正确的范围生命周期异常处理，执行watch。

当可能发生更新时，Angular会执行脏检查。XHR呼叫不在该范围内。Angular不会更新视图，除非你要求通过$apply进行脏检查。最好的做法是:尽可能使用Angular的内置提供商，比如$timeout、$http。或者ng-click, ng-change，等等。这些将隐式调用$apply。
相关文章：