AngularJS如何从<textarea>获取Google Maps脚本预填充的数据

时间:2017-07-24 06:10:14

标签: html angularjs google-maps angular-promise angularjs-service

&lt; p&gt;我有一个脚本可以访问Goggle Maps API并填写&lt; code&gt;&lt; textarea&gt;&lt; / code&gt;结果。如何将预先填充的数据传递到AngularJS控制器?&lt; / p&gt; &lt; pre class =&#34; lang-js prettyprint-override&#34;&gt;&lt; code&gt; $ scope.Add = function(msg){ $ log.log(MSG) } &LT; /代码&GT;&LT; /预&GT; &lt; pre class =&#34; lang-html prettyprint-override&#34;&gt;&lt; code&gt;&lt; div ng-app =&#34;&#34;&gt; &lt; div ng-controller =&#34; MapController&#34;&gt; &lt; div style =&#34; display:block&#34;&gt;     &lt; div id =&#34; map&#34;风格=&#34;浮动:左&#34;&GT;&LT; / DIV&GT;     &lt; div style =&#34; float:left;&#34;&gt;   &lt; textarea class =&#34; user&#34; NG-模型=&#34;用户&#34; ID =&#34; points_textarea&#34;&GT;&LT; / textarea的&GT;     &lt; input type =&#34; button&#34;值=&#34;提交&#34;纳克单击=&#34;添加(用户)&#34; /&GT; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /代码&GT;&LT; /预&GT; &lt; p&gt;我是angularjs的新手,&lt; / p&gt; &lt; p&gt;如何将已经从html中的javascript函数之一预填充的textarea传递给angularjs&lt; / p&gt;中的控制器的数据 &lt; p&gt;任何帮助请&lt; / p&gt;

5 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

HTML:

<textarea rows="4">{{user.content}}</textarea>

JS:

var app = angular.module('myApp', []);
app.controller('userCtrl', function($scope) {
  $scope.user = {
   'content': 'Theming support in an application can be pretty useful.'
   };
});

答案 2 :(得分:0)

我让你简单的plnkr例子 它将显示预填充数据和textarea的更改,它将显示警报

要理解的主要内容是ng-model,它使用ng-model="textArea"将输入类型=“textarea”与变量textArea绑定在一起     

https://plnkr.co/edit/rml2JC8YZgLDTyLgq7x3?p=preview

答案 3 :(得分:0)

将Google Maps功能纳入AngularJS框架:

angular.module("gMap", [])
.service("gMap", function($q) {
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];

  this.initialize = initialize;
  this.calcRoute = calcRoute;
  this.reset = reset;

  //functions here

});

修改calcRoute函数以返回承诺:

function calcRoute() {        
    var mode = google.maps.DirectionsTravelMode.DRIVING;
    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
        optimizeWaypoints: true,
        avoidHighways: false
    };

    var pointsDefer = $q.defer();        
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        //Code snipped    
        ̶v̶a̶r̶ ̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶=̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶"̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶"̶)̶;̶
        ̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶;̶

        var pointsObj = {};
        pointsObj.routeCenter = response.routes[0].bounds.getCenter();
        pointsObj.routeSpan = response.routes[0].bounds.toSpan();
        pointsObj.routePoints = 
             response.routes[0].overview_path
             .map( _ => ({
               lat: _.lat(),
               lng: _.lng()
             }));

        pointsDefer.resolve(pointsObj);

        clearMarkers();
        directionsDisplay.setDirections(response);
      } else { pointsDefer.reject(status); };
    });        
    return pointsDefer.promise;
}

请注意,上述函数会删除用<textarea>填充数据的代码。相反,代码返回一个AngularJS承诺,该承诺随数据解析。

替换HTML

中的<textarea>
<body ng-app="app" ng-controller="ctrl as vm">
    <h2>Google Map route point generator</h2>
    Click on the map to select the route points (up to 8).
    <br/><br/>
          <input type="button" value="Get Points" ng-click="vm.calcRoute()" />
    &nbsp;<input type="button" value="Reset" ng-click="vm.reset()" />
    <br/><br/>
        <div id="map_canvas"></div>
    <br/>
         ̶<̶t̶e̶x̶t̶a̶r̶e̶a̶ ̶r̶e̶a̶d̶o̶n̶l̶y̶ ̶i̶d̶=̶"̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶"̶ ̶o̶n̶C̶l̶i̶c̶k̶=̶"̶s̶e̶l̶e̶c̶t̶_̶a̶l̶l̶(̶)̶;̶"̶>̶
         ̶<̶/̶t̶e̶x̶t̶a̶r̶e̶a̶>̶ 
    <br/>
       {{vm.points | json}}
</body>

应用

angular.module("app",['gMap'])
.run(function(gMap){
  gMap.initialize();
})
.controller("ctrl", function(gMap) {
  this.calcRoute = function() {
    var promise = gMap.calcRoute();
    promise.then( data => {
      this.points = data;
    })
  };
  this.reset = function() {
    gMap.reset();
    this.points = {};
  };
})

DEMO on PLNKR

答案 4 :(得分:0)

您可以像这样定义您的Textarea:

<textarea ng-model='test_textarea'></textarea>

然后你应该像这样在控制器中初始化你的textarea:

$scope.test_textarea = "content";

当文档DOM准备就绪时,您的角度应用程序会初始化 - 因此,使用$ scope.test_textarea值覆盖该值。