TypeScript、AngularJS 和 GoogleMaps API：范围问题？

Posted 2023-03-13

技术标签:

【中文标题】TypeScript、AngularJS 和 GoogleMaps API：范围问题？【英文标题】：TypeScript, AngularJS and GoogleMaps API: scope issue? 【发布时间】：2016-11-07 19:48:12 【问题描述】：

我有一个处理一些基本 GoogleMaps API javascript 的 MainController。我坚持的一点是$scope.clock，它是 main.html 页面某处的 AngularJS 元素：<div><h5>clock</h5></div>。

它首先在constructor 内部初始化，并在触发事件bounds_changed 后更新（代码底部）。

现在我不明白的是以下两件事：

为什么console.log($scope) 在$scope.clock 更新为'Bye Bye' 之前显示$scope.clock = 'Bye Bye'？不应该是$scope.clock = 'Hi'吗？

为什么<div><h5>clock</h5></div> 元素没有更新为'Bye Bye'，但它仍然显示初始化时的旧值'Hi'？

class MainController 

constructor($http, $scope, $timeout, socket) 
    var $this = this;
    $scope.clock = 'Hi';
    $this.doSomething($this, $scope, 'Hi');


doSomething = function ($this, $scope, smth) 
    $this.initialiseMap($this, $scope, $timeout);
;

initialiseMap = function ($this, $scope, $timeout) 
    // Use AngularJS’s timer service $timeout and put a delay of 100ms before the map’s initialization  
    $timeout(function()
        // Initialise the Google map
        $scope.map = new google.maps.Map(document.getElementById('map'), 
            zoom: 11
            , center: 
                lat: -33.8675
                , lng: 151.2070
            
        );
        // Initialise the Geocoder
        var geocoder = new google.maps.Geocoder;
       // Initialise Searchbox: Create the search box and link it to the UI element.
      $scope.input = document.getElementById('pacinput');
      $scope.searchBox = new google.maps.places.SearchBox($scope.input);
      $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push($scope.input);      

      // Searchbox: Bias the SearchBox results towards current map's viewport.
      $scope.map.addListener('bounds_changed', function () $scope.searchBox.setBounds($scope.map.getBounds());
          console.log($scope);
          $scope.clock = 'Bye Bye';); // clock does not get updated in the HTML page!
    ,100);
;

【问题讨论】：

【参考方案1】：