如何在Angular的頁面上顯示非$ scope變量？

Question

我正在嘗試使用角度向頁面添加對象屬性，但我創建的屬性不是$scope變量。我的對象不是$scope對象的原因是由於我使用google maps API（我知道我應該使用一個與Angular兼容的對象，但我希望看看是否可以解決由於時間緊迫問題導致的問題而且我已經有其他一切正常工作）。我製作了markers，他們點擊了一個ajax call以獲取的數據，然後我想在我的模式上顯示數據。我嘗試了另外一篇關於$watch的帖子，以檢查是否有更改，但是我似乎實現它是錯誤的，因爲它只在應用程序的開始處運行一次，然後當模式對象被更改時它什麼都不做。代碼如下：

我的角模塊之外：

var modal = {}; 

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 28.5383, lng: -81.3792}, 
     scrollwheel: false, 
     zoom: 15 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     latitude = position.coords.latitude; 
     longitude = position.coords.longitude; 

     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('You are here!'); 
     map.setCenter(pos); 

     for (i = 0; i < globalDiscoveries.length; i++) { 
      var marker = new google.maps.Marker({ 
       position: globalDiscoveries[i].location, 
       map: map, 
       title: globalDiscoveries[i].name, 
       icon: { 
        url: globalDiscoveries[i].image, // url 
        scaledSize: new google.maps.Size(50, 50), // scaled size 
        origin: new google.maps.Point(0,0), // origin 
        anchor: new google.maps.Point(0, 0) // anchor 
       }, 
       custom_param: globalDiscoveries[i].image 
      }); 

      marker.addListener('click', function() { 
       var image = marker.custom_param; 

       $.post('/findImage', {image: image}, function(data) { 
        console.log(data); 
        modal.image = data[0].image; 
        modal.name = data[0].name; 
        modal.description = data[0].description; 
        modal.discoveredOn = data[0].discoveredOn; 
        console.log(modal); 
       }); 

       $('#myModal').modal('show'); 
      }); 
     } 

     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 

角模塊中的代碼（即涉及到這個問題）：

$scope.modal = $scope.$watch(angular.bind(this, function (modal) { 
     return this.modal; 
    }), function (newVal, oldVal) { 
     console.log('modal changed to ' + newVal); 
    }); 

總結一下，我試圖挽救模式對象（更改）到$scope.modal，所以我可以使用Angular將其注入到我的模態中。程序開始時爲$scope.modalconsole.logs undefined，然後當點擊標記並改變模態對象時，就沒有別的了。任何幫助將不勝感激！這樣

var modal = {}; 

Answer 1

您已經定義模式因此，它是一個gloabl variable.

您可以訪問它的角，因爲它是全球性的。

在角度上，你可以這樣做。

$scope.modal = modal; 

現在把$watch就可以了。

$scope.$watch('modal',function(newVal,oldVal){ 

    console.log(newVal); //here you can get new modal value; 

},true)