Угловой JS ngclick в ngrepeat не работает

0

У меня есть ng-click на кнопке в ng-repeat, однако функция никогда не называется? Может кто-нибудь сказать мне, почему?

<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>

Спасибо за любую помощь;)

2 ответа

0

Вызов функции в директиве ng-click должен ссылаться на функцию в области видимости, так же, как researchResults должна быть переменной области. То есть

$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);
}

в пределах соответствующего контроллера.

  • 0
    Хотя не работает (синтаксическая ошибка)
0

Обновление: - Описание ответа: - Вы не связали showMap() в области. $scope.showMap = function(data, all){...} его с $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>
  • 0
    Кажется правильным, но тоже не работает
  • 0
    Вы пропускаете что-то вроде $scope.exploreResults= (//some data here) Я имею в виду, что exploreResults не связан с областью действия. Как вы получаете эти данные exploreResults ?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню