TypeScript，AngularJS和GoogleMaps API：範圍問題？

Question

我有這個MainController，它處理一些基本的GoogleMaps API Javascript。我堅持使用的是$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); 
  }; 
  } 
  

Answer 1

$ scope.map.addListener（ '的bounds_changed'，

在角1.x的一個常見的問題，你有一個事件偵聽器基本上角不知道約所以回調不參與摘要週期。

修正：將$scope.$apply();添加到您的處理程序

更多

https://docs.angularjs.org/guide/scope