Question

angular.element(document).ready(function () {
        vm.myLocation= document.getElementById('myLocation').innerHTML;
    });

我如何存储它以便以后可以使用它？

编辑---

我在这里找到了一个指南（http://jasonwatmore.com/post/2014/02/15/AngularJS-Reverse-Geocoding-Directive.aspx），可以让我根据纬度/经度找到用户的位置。

我正在尝试获取加载的位置名称值（即西雅图，华盛顿州，美国），这样我就可以在创建新用户帖子时使用它，并在用户提交帖子时将其推送到数据库。不确定这样做的最佳方法是什么。

Answer 1

如果我们稍微修改提供的指令，我们实际上可以将它双向绑定回你的控制器，这样你就可以使用结果值了。

让我们首先看一下修改后的指令，然后我将逐一查看新的部分：

return {
 restrict: 'E',
 template: '<div>{{location}}</div>',
 scope: {
   location: '=',
   onLocationFound: '&'
 },
 link: function(scope, element, attrs) {
   var geocoder = new google.maps.Geocoder();
   var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);

   function setLocation(location) {
     console.log("setting location", location);
     scope.$apply(function() {
       scope.location = location;
       scope.onLocationFound({
         location: location
       });
     });
   }

   geocoder.geocode({
     'latLng': latlng
   }, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
       if (results[1]) {
         setLocation(results[1].formatted_address);
       } else {
         setLocation('Location not found');
       }
     } else {
       setLocation('Geocoder failed due to: ' + status);
     }
   });
 },
 replace: true
}

Using isolate scope，我们可以为我们的指令的使用者提供一种API，并使用它来绑定回我们的控制器：

 scope: {
   location: '=',
   onLocationFound: '&'
 }

这一点添加允许我们提供两个新属性location和on-location-found，可以一起使用，以完全按照您的需要进行操作。

=表示该值将是双向绑定的，&是一个表达式，将在我们需要时进行评估，为我们提供一种方式来向消费者发出指示信号

在我们的指令中，我们不是直接写入DOM，而是将模板更改为绑定到location属性。

template: '<div>{{location}}</div>'

然后，只要API调用完成，我们就可以更新范围值，并执行我们的表达式函数，如下所示：

 scope.$apply(function() {
   scope.location = location;
   scope.onLocationFound({
     location: location
   });
 });

需要scope.$apply启动摘要循环并确保DOM得到更新。

对onLocationFound的调用将执行我们的表达式，并以对象的形式传递我们提供的键/值对的任何参数。

结果是我们可以在这样的标记中使用它：

你可以用指令做很多事情，我鼓励你read up on the documentation真正更好地了解正在发生的事情。

我冒昧地将这些全部放在下面的工作片段中。

(function() {

  function reverseGeocodeDirective() {
    return {
      restrict: 'E',
      template: '<div>{{location}}</div>',
      scope: {
        location: '=',
        onLocationFound: '&'
      },
      link: function(scope, element, attrs) {
        var geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);

        function setLocation(location) {
          console.log("setting location", location);
          scope.$apply(function() {
            scope.location = location;
            scope.onLocationFound({
              location: location
            });
          });
        }

        geocoder.geocode({
          'latLng': latlng
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              setLocation(results[1].formatted_address);
            } else {
              setLocation('Location not found');
            }
          } else {
            setLocation('Geocoder failed due to: ' + status);
          }
        });
      },
      replace: true
    }
  }

  function MyCtrl() {
    var _this = this;

    _this.location = "Nowhere";
    _this.locationFound = function(location) {
      _this.message = "Location was found";
    };
  }

  angular.module('my-app', [])
    .directive('reverseGeocode', reverseGeocodeDirective)
    .controller('myCtrl', MyCtrl);


}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div ng-app="my-app" ng-controller="myCtrl as ctrl">
  <reverse-geocode lat="40.730885" lng="-73.997383" 
                   location="ctrl.location"
                   on-location-found="ctrl.locationFound(location)">
  </reverse-geocode>

  <h3><code>ctrl.location = </code>{{ctrl.location}}</h3>
  <h3><code>ctrl.message = </code>{{ctrl.message}}</h3>
</div>

Answer 2

您是否可以尝试broadcast指令中的更改并在控制器中添加watch以进行此更改？

与https://stackoverflow.com/a/25505545/3131696类似的东西。

有关广播的更多信息，http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding- $ emit， - $ broadcast-and- $ on-in-AngularJS.html

如何在我的控制器中存储一个变量，该变量在DOM加载后得到的值？

2 个答案: