3
我有這個MainController,它處理一些基本的GoogleMaps API Javascript。我堅持使用的是$scope.clock
,它是main.html頁面中的某個AngularJS元素:<div><h5>{{clock}}</h5></div>
。TypeScript,AngularJS和GoogleMaps API:範圍問題?
它首先在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); }; }
非常感謝這個Basarat。現在我看到了你的名字,我認爲我已經在YouTube上看到了一些你的教程。 – Karl