javascript - 信息窗口 AngularJS 中的按钮

Question

在我的 map 中，我使用标记标记了几个位置。如果我单击一个标记，则会打开一个信息窗口，其中显示该地点的名称以及其中的一个按钮。我需要编写一个函数，以便在单击信息窗口中的按钮时将位置添加到数组中。

我的代码如下

$scope.routes = [];
locations = data;
$scope.map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: new google.maps.LatLng(12.9716, 77.5946),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

$scope.infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    icon: {
      url: 'img/map-marker.png',
      scaledSize: new google.maps.Size(25, 25)
    },
    position: new google.maps.LatLng(locations[i].Latitude, locations[i].Longitude),
    map: $scope.map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\'' + locations[i].Name + '\');">Add</button>';
      var content = $compile(content1)($scope);
      $scope.infowindow.setContent(content[0]);
      $scope.infowindow.open($scope.map, marker);
    }
  })(marker, i));
}
$scope.AddLoc = function(x) {
  $scope.routes.push(x);
  alert($scope.routes);
}

当我运行代码并单击标记时，它会引发错误

Unhandled exception at line 31, column 318 in http://ajax.googleapis.com ajax/libs/angularjs/1.5.8/angular.min.js

0x800a139e - JavaScript runtime error: [jqLite:nosel] http://errors.angularjs.org/1.5.8/jqLite/nosel

请帮助我

Answer 1

根据angular.js源代码 compile function构造 jqLite element反过来，如果 HTML 字符串用标签包装，则被认为是有效:

if (argIsString && element.charAt(0) !== '<') {
  throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
}

总而言之，如果 HTML 字符串采用以下格式表示，则编译会失败 abc :

var t = $compile("abc")($scope);  //fails

用标签包裹后，例如 <div>abc</div>编译成功:

var t = $compile("<div>abc</div>")($scope);  //succeed 

解决方案

将工具提示 HTML 内容包裹在容器周围 div元素。

替换行:

var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>';

与

var content1 = '<div>' + locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>' + '</div>';

演示

angular.module('mapApp', [])
  .controller('mapCtrl', function($scope, $rootScope, $compile) {
    $scope.routes = [];
    $scope.locations = [{
        Name: 'Sydney',
        Latitude: -33.873033,
        Longitude: 151.231397
      },
      {
        Name: 'Melbourne',
        Latitude: -37.812228,
        Longitude: 144.968355
      }
    ];

    $scope.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(-38.363, 131.044),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $scope.infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < $scope.locations.length; i++) {
      marker = new google.maps.Marker({
        //icon: { url: 'img/map-marker.png', scaledSize: new google.maps.Size(25, 25) },
        position: new google.maps.LatLng($scope.locations[i].Latitude, $scope.locations[i].Longitude),
        map: $scope.map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var tooltipHtml = '<div>' + $scope.locations[i].Name + '<button class="btn btn-success" ng-click="addLoc(\'' + $scope.locations[i].Name + '\');">Add</button>' + '</div>';
          var elTooltip = $compile(tooltipHtml)($scope);
          $scope.infowindow.setContent(elTooltip[0]);
          $scope.infowindow.open($scope.map, marker);
        }
      })(marker, i));
    }
    $scope.addLoc = function(x) {
      $scope.routes.push(x);
    };
  });

html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}

#map {
  height: 400px;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<div ng-app="mapApp" ng-controller="mapCtrl">
  <pre style="width: 30%; height: 400px; overflow-y: scroll; float:left;">
       {{routes | json}} 
    </pre>
  <div id="map" style="float:left; width:60%;"></div>
</div>