ng-init中的特殊字符：错误：$ parse：Lexer错误：意外的下一个字符AngularJS

Question

我在AngularJS网站上遇到了一个问题。看起来当ng-init包含带有特殊字符（如“ï”）的东西时，会给我带来错误。有人知道如何处理吗？

ng-init="init('en', 'distance-from-city-to-city', '{"rate":17,"views":17,"_id":"5b6dccd4ee416d38ac4144b9","path":"en,côte-d-ivoire,montagnes,guiglo,taï","place_id":"ChIJ29J4DJbCvA8Rnj-_RHcJMTU","name":"Taï","lang":"en","formatted_address":"Taï, Côte d'Ivoire","utc_offset":0,"location":{"_id":"5b6dccd4ee416d38ac4144ba","lat":5.871288,"lng":-7.454015999999999},"viewport":{"_id":"5b6dccd4ee416d38ac4144bb","northeast":{"_id":"5b6dccd4ee416d38ac4144bc","lat":5.8823873,"lng":-7.4380086},"southwest":{"_id":"5b6dccd4ee416d38ac4144bd","lat":5.860188399999999,"lng":-7.4700234}},"keywords":"Tai,cote,divo,divoi,div,d,cot,taï,ci,co,coye,iv,ivoi,ivoire,Taï,Côte,Ivoir","__v":0}', '{"rate":17,"views":32,"_id":"5b0991a2b3a19e611596af32","path":"en,italy,lombardy,metropolitan-city-of-milan,milan","place_id":"ChIJ53USP0nBhkcRjQ50xhPN_zw","name":"Milan","lang":"en","formatted_address":"Milan, Metropolitan City of Milan, Italy","utc_offset":120,"location":{"_id":"5b0991a2b3a19e611596af33","lat":45.4642035,"lng":9.189982},"viewport":{"_id":"5b0991a2b3a19e611596af34","northeast":{"_id":"5b0991a2b3a19e611596af35","lat":45.535689,"lng":9.2903463},"southwest":{"_id":"5b0991a2b3a19e611596af36","lat":45.3897787,"lng":9.065118199999999}},"keywords":"Mila,Milan,MItaly,MiItaly,MilaItaly,MilanItaly,pItaly,Милан,vb,vbkfy,Metropolitan,City,of,Ital,itali,italia,Italis","__v":0}')"

这是我收到的错误：

Lexer Error: Unexpected next character  at columns 610-610 [ï] in expression [init('en', 'distance-from-city-to-city', '{"rate":17,"views":17,"_id":"5b6dccd4ee416d38ac4144b9","path":"en,côte-d-ivoire,montagnes,guiglo,taï","place_id":"ChIJ29J4DJbCvA8Rnj-_RHcJMTU","name":"Taï","lang":"en","formatted_address":"Taï, Côte d'Ivoire","utc_offset":0,"location":{"_id":"5b6dccd4ee416d38ac4144ba","lat":5.871288,"lng":-7.454015999999999}...

这是发生问题的页面：http://fromto.city/en/distance-from-city-to-city/c%C3%B4te-d-ivoire,montagnes,guiglo,ta%C3%AF/italy,lombardy,metropolitan-city-of-milan,milan

例如，这没有问题： http://fromto.city/en/distance-from-city-to-city/michoac%C3%A1n,zamora/guanajuato,los-ocotes/mexico

Answer 1

使用ng-init用户不是一个好习惯，但是如果您真的想使用，请使用以下命令：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="ctrl" ng-init="callInit()"></div>

<script>

angular.module("myapp", [])
.controller("ctrl", function($scope){
  $scope.callInit = () => {
    $scope.init('en', 'distance-from-city-to-city', '{&#34;rate&#34;:17,&#34;views&#34;:17,&#34;_id&#34;:&#34;5b6dccd4ee416d38ac4144b9&#34;,&#34;path&#34;:&#34;en,côte-d-ivoire,montagnes,guiglo,taï&#34;,&#34;place_id&#34;:&#34;ChIJ29J4DJbCvA8Rnj-_RHcJMTU&#34;,&#34;name&#34;:&#34;Taï&#34;,&#34;lang&#34;:&#34;en&#34;,&#34;formatted_address&#34;:&#34;Taï, Côte d&#39;Ivoire&#34;,&#34;utc_offset&#34;:0,&#34;location&#34;:{&#34;_id&#34;:&#34;5b6dccd4ee416d38ac4144ba&#34;,&#34;lat&#34;:5.871288,&#34;lng&#34;:-7.454015999999999},&#34;viewport&#34;:{&#34;_id&#34;:&#34;5b6dccd4ee416d38ac4144bb&#34;,&#34;northeast&#34;:{&#34;_id&#34;:&#34;5b6dccd4ee416d38ac4144bc&#34;,&#34;lat&#34;:5.8823873,&#34;lng&#34;:-7.4380086},&#34;southwest&#34;:{&#34;_id&#34;:&#34;5b6dccd4ee416d38ac4144bd&#34;,&#34;lat&#34;:5.860188399999999,&#34;lng&#34;:-7.4700234}},&#34;keywords&#34;:&#34;Tai,cote,divo,divoi,div,d,cot,taï,ci,co,coye,iv,ivoi,ivoire,Taï,Côte,Ivoir&#34;,&#34;__v&#34;:0}', '{&#34;rate&#34;:17,&#34;views&#34;:32,&#34;_id&#34;:&#34;5b0991a2b3a19e611596af32&#34;,&#34;path&#34;:&#34;en,italy,lombardy,metropolitan-city-of-milan,milan&#34;,&#34;place_id&#34;:&#34;ChIJ53USP0nBhkcRjQ50xhPN_zw&#34;,&#34;name&#34;:&#34;Milan&#34;,&#34;lang&#34;:&#34;en&#34;,&#34;formatted_address&#34;:&#34;Milan, Metropolitan City of Milan, Italy&#34;,&#34;utc_offset&#34;:120,&#34;location&#34;:{&#34;_id&#34;:&#34;5b0991a2b3a19e611596af33&#34;,&#34;lat&#34;:45.4642035,&#34;lng&#34;:9.189982},&#34;viewport&#34;:{&#34;_id&#34;:&#34;5b0991a2b3a19e611596af34&#34;,&#34;northeast&#34;:{&#34;_id&#34;:&#34;5b0991a2b3a19e611596af35&#34;,&#34;lat&#34;:45.535689,&#34;lng&#34;:9.2903463},&#34;southwest&#34;:{&#34;_id&#34;:&#34;5b0991a2b3a19e611596af36&#34;,&#34;lat&#34;:45.3897787,&#34;lng&#34;:9.065118199999999}},&#34;keywords&#34;:&#34;Mila,Milan,MItaly,MiItaly,MilaItaly,MilanItaly,pItaly,?????,vb,vbkfy,Metropolitan,City,of,Ital,itali,italia,Italis&#34;,&#34;__v&#34;:0}');
  }
  
  $scope.init = (/* args*/) =>{
    console.log("called");
    //some code here
  }
});
</script>

Answer 2

只是找到了解决此问题的另一种方法。我决定使用全局javascript变量将数据传递给AngularJS控制器。更多信息，请点击https://codeutopia.net/blog/2013/05/27/3-ways-to-get-backend-data-to-angularjs/

<script type="text/javascript">
    var fromToData = {}
    <% if(locals.from){ %>
        fromToData.from = <%-JSON.stringify(locals.from)%>
    <% } %>
    <% if(locals.to){ %>
        fromToData.to = <%-JSON.stringify(locals.to)%>
    <% } %>
    <% if(locals.route){ %>
        fromToData.route = <%-JSON.stringify(locals.route.toJSON())%>
    <% } %>
</script>

这是控制器中的代码：

app.controller('RouteInfoController', ['$scope', function($scope){

  $scope.init = function(default_json, lang, currencies, liquids){
    $scope.local.route = fromToData.route
  }

}])

不是通过ng-init传递变量：

<form
class="navbar-nav d-flex flex-sm-row flex-xs-column w-100 my-2 my-lg-0"
ng-controller="FormController"
ng-init="init('<%= locals.lang %>', '<%= locals.default.route_keyword %>', '<%= JSON.stringify(locals.from) %>', '<%= JSON.stringify(locals.to) %>')">...</form>