Question

我正在尝试在我的离子应用中实现angular-google-maps标记，包含一些信息窗口，其中包含一些简单的html和一个按钮，可以将您带到pin＆＃39; profile＆＃39;

这是我的HTML：

<ion-view view-title="Local Users">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Local Users</h1>
        </ion-header-bar>
        <ion-content scroll="false" data-tap-disabled="true">
            <ui-gmap-google-map id="map" center="map.center" zoom="map.zoom">
                <ui-gmap-marker ng-repeat="marker in arrayOfMarkers" coords="marker.coords" options="marker.options" events="marker.events" ng-click="toggleInfoWindow" idkey="marker.id">
                    <ui-gmap-window>
                        <div><h3>{{marker.name}}</h3><button class="button button-block button-positive" ng-click="viewProfile" id="marker.sid">View Profile</button></div>
                    </ui-gmap-window>
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </ion-content>
    </ion-pane>
</ion-view>

Controller中的相关代码：

function renderAllUsers(results) {
            for (var i = 0 ; i < results.length ; i++) {
                var user = results[i];
                var mySID = JSON.parse(window.localStorage.getItem("userObject")).userProfileId;
                if (user.userProfileId != mySID) {
                    var userCoords = {
                        latitude: user.userProfileLatitude,
                        longitude: user.userProfileLongitude
                    };
                    var markerOptions = {
                        animation: "drop"
                    }
                    var thisMarker = {
                        id:i,
                        coords: userCoords,
                        name: userObject.userProfileName,
                        sid: userObject.id,
                        options: markerOptions,
                        idKey: i,
                        window: {
                            show: false,
                            title: "Hello"
                        }
                    }
                    $scope.arrayOfMarkers.push(thisMarker);
                }
            }
        }

        $scope.toggleInfoWindow = function () {
            $scope.windowOptions.visible = !$scope.windowOptions.visible;
        };

        $scope.viewProfile = function (e) {
            $state.go("app.userProfile");
        };

使用概述的代码，按钮单击不执行任何操作，不记录任何错误。

有什么建议吗？

Answer 1

可能会发生这种情况，因为无法从s <- "some text in \\emph{italics} and some \\emph{more italics} and ..." gsub(pattern,"*\\1*", s) > "some text in *italics} and some \\emph{more italics* and ..."子范围访问在控制器范围内声明的viewProfile事件。

以下解决方案对我有用：

首先我们需要引入一个额外的控制器：

ui-gmap-window

然后将信息窗口布局更改为：

app.controller('infoWindowCtrl', function($scope) {
    $scope.viewProfile = function (e) {
        alert("app.userProfile");
    }
});

Demo (plunker)

Ionic Google地图标记窗口内容

1 个答案: