google 地图 当我点击 google 地图中的箭头图标时 [$parse:syntax] 错误？

Question

.controller('MapCtrl', [
    '$scope', '$http', '$location', '$window',
 
function ($scope, $http, $location, $window) {
    $http.get('****').success(function (data, dealers, response) {
        function initialize() {
            var serverData = data;
            $scope.locations = [];
            for (var i = 0; i < serverData.length; i++) {
                var modal = [
                data[i].Store_Name, data[i].S_Location.Latitude, data[i].S_Location.Longitude, i, 'images/arrow.svg', data[i].S_Address];
                $scope.locations.push(modal); 
            }
            console.log($scope.locations);
            //---------------------------------------------------------
            //console i am getting like this
            var locations = [
                ['nokia store', '12.971599', '77.594563', '1', 'images/arrow.svg.svg', '55a78953815356700bee698f'],
                ['samsung store', '12.9065534', '77.5774802', '2', 'images/arrow.svg.svg', '55a786d1815356700bee6982'], ];
            //----------------------------------------------------------
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: new google.maps.LatLng(12.9667, 77.5667),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            for (i = 0; i < $scope.locations.length; i++) {
                //console.log($scope.locations[i][1]);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng($scope.locations[i][1], $scope.locations[i][2]),
                    map: map,
                    icon: $scope.locations[i][4],
                    animation: google.maps.Animation.DROP,
                });
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function() {
   //console.log($scope.locations[i][8]);

   var compiled = $compile('<button ng-click="navigate('+$scope.locations[i][5]+')">Navigate</button>')($scope);

   var infowindow = new google.maps.InfoWindow({content: compiled[0]});
          

          infowindow.open(map, marker);
     $scope.$apply();
     
        }
                })(marker, i));
            }
            $scope.map = map;
        }
        $scope.navigate(id) {
            console.log(id);
        }
    });

当我单击图标时，我在控制台中收到这样的错误

错误：[$parse:syntax] 语法错误：令牌 'b24782c7d354f30cda0e89' 是意外的，在表达式 [navigate(55b24782c7d354f30cda0e89)] 从 [b24782c7d354f30cda0e89)] 开始的第 12 列期望 [)]。 http://errors.angularjs.org/1.3.13/$parse/syntax?p0=b24782c7d354f30cda0e89&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=12&p3=navigate(55b24782c7d354f30cda0e89)&p4=b24782c7d354ef830)cda0 在 REGEX_STRING_REGEXP (http://localhost:8100/bower_components/angular/angular.js:63:12) 在 Parser.throwError (http://localhost:8100/bower_components/angular/angular.js:12011:11) 在 Parser.consume (http://localhost:8100/bower_components/angular/angular.js:12053:12) 在 Parser.functionCall (http://localhost:8100/bower_components/angular/angular.js:12323:10) 在 Parser.primary (http://localhost:8100/bower_components/angular/angular.js:11995:24) 在 Parser.unary (http://localhost:8100/bower_components/angular/angular.js:12271:19) 在 Parser.multiplicative (http://localhost:8100/bower_components/angular/angular.js:12254:21) 在 Parser.additive (http://localhost:8100/bower_components/angular/angular.js:12245:21) 在 Parser.relational (http://localhost:8100/bower_components/angular/angular.js:12236:21) 在 Parser.equality (http://localhost:8100/bower_components/angular/angular.js:12227:21) （匿名函数）@angular.js:11607$get @angular.js:8557invokeLinkFn @angular.js:8221nodeLinkFn @angular.js: 7729compositeLinkFn @ angular.js:7078publicLinkFn @angular.js:6957(匿名函数)@controllers.js:630S.trigger@main.js:20(匿名函数)@VM11388:37(匿名函数)@VM11381:10L.ff@VM11381:195L.Dk@VM11381:195S.trigger@main.js:20eb@main.js:22S.trigger@ main.js:20L.Sk @VM11381:65（匿名函数）@main.js:21

Answer 1

你得到 $parse 错误的解析错误是因为你的 locations[i][5] 变量包含一个字符串，你直接将该字符串放在 navigate 函数中，在评估后它变成 ng-click="navigate(55a78953815356700bee698f)" 所以在编译 div 时会抛出错误，而在解析 div 时会抛出错误。

您可以通过在带有索引的按钮内引用范围变量来解决这个问题。

代码

$compile('<button ng-click="navigate(locations['+i+'][5])">Navigate</button>')($scope);