Angular代码未显示在html页面上

【问题标题】：Angular Code not showing up on html pageAngular代码未显示在html页面上
【发布时间】：2025-03-04 03:50:02
【问题描述】：

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

（按顺序）

3 - 未定义

1 - 检查

2 - Google 用户

为什么我的 html 中的 place 变量没有更新为“A Google 用户”？

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>

【问题讨论】：

标签： javascript html angularjs scope angularjs-scope

【解决方案1】：

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。

【讨论】：