Angular JS ngclick中的ngclick无效

Question

我在ng-repeat中单击了ng，但是没有调用该函数？ 有人可以告诉我为什么吗？

<div ng-repeat="data in exploreResults">
    <button type="button" ng-click="showMap(data, exploreResults)" class="showMapExploreButton">{{data.name}}</button>
    <p>Address: {{data.address}}<br>
    Rating: {{data.rating == 0 ? 'No rating available' : data.rating}} <br>
    Coordinates: {{data.coordinates.latitude}}, {{data.coordinates.longitude}}</p>
    <div ng-show=data.showMap id="map-canvas-explore" style="float:right; height: 20%; width: 50%; padding-right:20px;"></div>
</div>

Java脚本如下：

<script>
function showMap(data, all) {
    all.forEach(function(entry) {
            entry.showMap = false;
    });
    data.showMap = true;
    console.log(JSON.stringify(data));
    //initialize map
    function initializeMap() {
        var latLng = new google.maps.LatLng(data.coordinates.latitude, data.coordinates.longitude);
        var mapCanvas = document.getElementById('map-canvas-explore');
        var mapOptions = {
            center: latLng, 
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        new google.maps.Marker({
            position: latLng,
            map: map,
            title: 'Destination'
        });
    }
    initializeMap();
    google.maps.event.addDomListener(window, 'load', initializeMap);
}
</script>

谢谢你的帮助;）

Answer 1

更新：-有关答案的说明：-您尚未在范围上绑定showMap()函数。 将其与$scope.showMap = function(data, all){...}绑定，如下所示

  <script>
    $scope.showMap = function(data, all) {
        all.forEach(function(entry) {
                entry.showMap = false;
        });
        data.showMap = true;
        console.log(JSON.stringify(data));
        //initialize map
        function initializeMap() {
            var latLng = new google.maps.LatLng(data.coordinates.latitude, data.coordinates.longitude);
            var mapCanvas = document.getElementById('map-canvas-explore');
            var mapOptions = {
                center: latLng, 
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            var map = new google.maps.Map(mapCanvas, mapOptions);
            new google.maps.Marker({
                position: latLng,
                map: map,
                title: 'Destination'
            });
        }
        initializeMap();
        google.maps.event.addDomListener(window, 'load', initializeMap);
    }
    </script>

Answer 2

ng-click指令中的函数调用需要在作用域上引用一个函数，就像explorerResults应该是作用域变量一样。 那是

$scope.showMap = function(data, all) {
    all.forEach(function(entry) {
        entry.showMap = false;
    });
    data.showMap = true;
    console.log(JSON.stringify(data));
    //initialize map
    function initializeMap() {
        var latLng = new google.maps.LatLng(data.coordinates.latitude, data.coordinates.longitude);
        var mapCanvas = document.getElementById('map-canvas-explore');
        var mapOptions = {
            center: latLng, 
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        new google.maps.Marker({
            position: latLng,
            map: map,
            title: 'Destination'
        });
    }
    initializeMap();
    google.maps.event.addDomListener(window, 'load', initializeMap);
}

在相关控制器中。