1

我想为制造商点击事件创建单独的模板。但是当我单击标记时，它会给出空模板。模板test.html未加载。为什么会这样。

请看运行演示

主要观点

<ui-gmap-google-map center="map.center" pan="false" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-markers models="markers" idkey="id" coords="'coords'" events="markerEvents" icon="'icon'">
           <ui-gmap-windows show="windowOptions.show" options="windowOptions" closeClick="closeWindow" templateUrl="'test.html'" 
           templateParameter="maker_info">
            </ui-gmap-windows>
        </ui-gmap-markers>
    </ui-gmap-google-map>

标记模板

测试.html

<div ng-controller="templateController">
Template ID: {{parameter.id}}
</div>

控制器.js

'use strict';
angular.module('app', ['uiGmapgoogle-maps'])
  .controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi, uiGmapIsReady) {


     uiGmapGoogleMapApi.then(function(maps){
        $scope.markers =[];
        $scope.maker_info = [];
        $scope.map = {
           center: {
              latitude:39,
              longitude: -98
           },
           zoom: 5,
           bounds : {},
           control : {}
        };
        $scope.windowOptions ={};
        $scope.windowOptions.show = false;
      });

      uiGmapIsReady.promise().then(function (instances) {
          $scope.markers = [{
            "id": "1",
            "coords":{
              "latitude": "39.05",
              "longitude": "-98.55"
            }
          }, {
            "id": "2",
            "coords":{
             "latitude": "39.15",
            "longitude": "-98.45"
            }

          }, {
            "id": "3",
             "coords":{
             "latitude": "39.25",
            "longitude": "-97.95"
            }

          } ];

          $scope.markerEvents= {
            click: function(marker, eventName, model, args) {
                $scope.windowOptions.show = true;
                $scope.maker_info = model;
                $scope.$apply();
            }
          };
      });
  })
  .controller('templateController',function(){});
4

0 回答 0