AngularJS 如何从 <textarea> 中获取由 Google 地图脚本预填充的数据

Question

我有一个脚本可以访问 Goggle 地图 API 并在 <textarea> 中填写结果。如何将预填充的数据传递到 AngularJS 控制器？

$scope.Add=function(msg){

$log.log(msg)
}

<div ng-app="">
<div ng-controller="MapController">  

<div style="display:block">

    <div id="map" style="float:left"></div>

    <div style="float:left;">

  <textarea class="user" ng-model="user" id="points_textarea"></textarea>

    <input type="button" value="submit" ng-click="Add(user)" />

</div>


</div>

我是 angularjs,

的新手

如何将已从 html 中的 javascript 函数之一预填充的文本区域中的数据传递到 angularjs

中的控制器

请帮忙

Answer 1

您可以为这些使用 ng-model 和 ng-bind。在 angular 4 - https://coursetro.com/posts/code/58/Angular-4-Property-Binding-Tutorial

中检查

并且在 Angular 1 - https://docs.angularjs.org/api/ng/directive/ngBind

Answer 2

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.'
   };
});

Answer 3

我已经为您制作了简单的 plnkr 示例它将显示预填充的数据，并且在更改文本区域时将显示警报

要了解的主要内容是 ng-model，它通过使用 ng-model="textArea" 将您的输入类型="textarea" 与变量 textArea 绑定

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

Answer 4

将 Google 地图功能引入 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`函数修改为return一个承诺：

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> 的代码。相反，代码 return 是一个 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

Answer 5

您可以像这样定义文本区域：

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

然后你应该像这样在控制器中初始化你的文本区域：

$scope.test_textarea = "content";

您的 angular 应用程序在文档 DOM 准备就绪时初始化 - 因此，用您的 $scope.test_textarea 值覆盖该值。

AngularJS 如何从 <textarea> 中获取由 Google 地图脚本预填充的数据

AngularJS how to get data from <textarea> prefilled by Google Maps script

html

google-maps

angularjs

angularjs-service

angular-promise

将 Google 地图功能引入 AngularJS 框架：

将`calcRoute`函数修改为return一个承诺：

替换HTML中的`<textarea>`

应用程序

DEMO on PLNKR

AngularJS 如何从 <textarea> 中获取由 Google 地图脚本预填充的数据

AngularJS how to get data from <textarea> prefilled by Google Maps script

将 Google 地图功能引入 AngularJS 框架：

将calcRoute函数修改为return一个承诺：

替换HTML中的<textarea>

应用程序

将`calcRoute`函数修改为return一个承诺：

替换HTML中的`<textarea>`