Google지도 아이콘을 클릭하여 ngShow 속성을 전환하십시오.

Question

지도상의 마커를 클릭하여 Google지도 <div>에 인접한 <section>에서 ng-show를 토글하려고합니다. 기본적으로 마커를 클릭하면 ng-click="toggle()"처럼 동작합니다.

마커를 클릭하면 true/false 값이 콘솔에 올바르게 기록되지만 ng-show은 제대로 표시되지 않습니다. http://plnkr.co/edit/z2UCTvqqWh04ZElu6npg?p=preview

이 각도 함께 할 수있는이 뭔가, 또는지도 API 이벤트를 함께 할 수있는 뭔가입니다 :

.controller('MapController', ['$scope', 
    function($scope) { 
     // $scope.visible = true; 

     $scope.toggle = function(){ 
     console.log("Value before clicking: "+$scope.visible); 
     $scope.visible = !$scope.visible; 
     console.log("Value after clicking: "+$scope.visible); 
     } 

     $scope.buildMap = function(){ 
     var mapStyle=[ 
     // Map styles 
     ]; 

     var myLatLng = new google.maps.LatLng(40.748453,-73.995548); 

     var mapOptions = { 
     // Map options 
     }; 

     var myMap = new google.maps.StyledMapType(mapStyle,{name: "My Map"}); 

     var map = new google.maps.Map(document.getElementById('canvas'),mapOptions); 
     map.mapTypes.set('myMapStyled', myMap); 
     map.setMapTypeId('myMapStyled'); 

     var myMarker = new google.maps.Marker({ 
     map: map, position: myLatLng, title: "I’m Here" 
     }); 

     google.maps.event.addListener(myMarker, 'click', function(e){ 
     $scope.toggle(); 
     }); 
    }; 
    } 
]) 

는 여기가 Plunker에?

또한 컨트롤러 내에서 모든 것을 눌러 Maps API를로드하는 것이 현명하지 않습니까?

Answer 1

모양을 :

google.maps.event.addListener(myMarker, 'click', function(e){ 
$scope.toggle(); 
}); 

당신은 $apply를 사용해야합니다 :

는

$는 각 프레임 워크의 외부에서 각도에서 식을 실행하는 데 사용됩니다() 적용됩니다. (예 : 브라우저 DOM 이벤트, setTimeout, XHR 또는 타사 라이브러리). 우리가 을 호출하기 때문에 우리는 적절한 범위 수명주기 인 예외 처리, 시계 실행을 수행해야합니다.

예 :

google.maps.event.addListener(myMarker, 'click', function(e){ 
    $scope.$apply(function() { 
    $scope.toggle(); 
    }); 
}); 

데모 : http://plnkr.co/edit/cB2K31mSR7VmIAvC72WM?p=preview

Answer 2

귀하의 토글 방법은 $ scope에 포장해야합니다. $ 각도는 변경 사항을 인식하고 인터페이스를 업데이트합니다. 그래서 토글 방법은 다음 코드에서 이벤트 핸들러 함수는 루프가 트리거되지 않고 때까지 변경 사항이 DOM에 반영되지 소화 $ 의미 "각도의 세계 밖에서"사는이

$scope.toggle = function(){ 
    $scope.$apply(function() { 
    console.log("Before clicking toggle: "+$scope.visible); 
    $scope.visible = !$scope.visible; 
    console.log("After clicking toggle: "+$scope.visible); 
    }); 
}