TypeScript、AngularJS和GoogleMaps API:范围问题?

TypeScript、AngularJS和GoogleMaps API:范围问题?,angularjs,typescript,angularjs-scope,google-maps-api-2,Angularjs,Typescript,Angularjs Scope,Google Maps Api 2,我有一个主控制器,它处理一些基本的谷歌地图API Javascript。我遇到的问题是$scope.clock,它是main.html页面中某个地方的AngularJS元素:{{clock} 它首先在构造函数中初始化,并在触发事件bounds\u change后更新(代码底部) 现在我不明白的是以下两件事: 为什么console.log($scope)在$scope.clock更新为'byebay'之前显示$scope.clock='byebay'?它不应该是$scope.clock='Hi'

我有一个主控制器,它处理一些基本的谷歌地图API Javascript。我遇到的问题是
$scope.clock
,它是main.html页面中某个地方的AngularJS元素:
{{clock}

它首先在
构造函数
中初始化,并在触发事件
bounds\u change
后更新(代码底部)

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

  • 为什么
    console.log($scope)
    $scope.clock
    更新为
    'byebay'
    之前显示
    $scope.clock='byebay'
    ?它不应该是
    $scope.clock='Hi'
  • 为什么
    {{clock}}
    元素没有更新为
    '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);
    };
    }
    
$scope.map.addListener('bounds_changed'

angular 1.x中的一个常见问题。您有一个事件侦听器,angular根本不知道它,因此回调不参与摘要循环

修复:将
$scope.$apply();
添加到处理程序

更多

非常感谢您的介绍。现在我看到了您的名字,我想我已经在YouTube上看到了您的一些教程。