将 ng-model 添加到指令答案

【问题标题】：Adding ng-model to directive将 ng-model 添加到指令
【发布时间】：2016-12-20 09:58:04
【问题描述】：

我有以下指令可以将经纬度反向地理编码到一个地方：

/* global app*/

app.directive('reverseGeocode', function () {
        return {
            restrict: 'A',
            template: '<div ng-model="autoLocation"></div>',
            link: function (scope, element, attrs) {
                var geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);
                geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[1]) {
                            element.text(results[1].formatted_address);
                        } else {
                            element.text('Location not found');
                        }
                    } else {
                        element.text('');
                    }
                });
            },
            require: "ngModel",
            replace: true
        }
    });

但由于某种原因，它似乎没有检索到 ng-model 并显示它：

<div class="form-group move-down" ng-class="{ 'has-error': place === null }">
            <label for="place">Picture taken in:</label>
            <input type="text" class="form-control" ng-if="!capture.geo" id="place" ng-model="place.formatted_address" ng-autocomplete options="options" required details="place" ng-click="checkPlace(place)"
            uib-tooltip="Please pick the location where you captures your photo!"
            tooltip-placement="top-right"
            tooltip-trigger="mouseenter"
            tooltip-enable="!details.formatted_address"
            tooltip-class="tooltip">

            // DIRECTIVE USED HERE
            <reverse-geocode class="form-control" ng-if="capture.geo" lat="{{capture.latitude}}" lng="{{capture.longitude}}">
            <div ng-show="place === null" class="noPlace">
              <i class="glyphicon glyphicon-remove"></i> Please fill in a valid location!
            </div>
        </div>

我的目标是使用以下方法显示以下位置：

<div ng-if="capture.geo">Place: {{autoLocation}}</div>

【问题讨论】：

你能提供一个工作 plunkr/fiddle
另外，reverse-geocode 指令的结束标记在哪里？

标签： angularjs directive angular-ngmodel

【解决方案1】：

首先，您需要删除 restrict 或至少使用 E（元素）而不是 A（属性），因为您将指令用作元素。

其次，您不需要将ng-model（它本身就是一个指令）添加或传递给您的指令。您可以直接访问控制器范围变量capture。如果您希望指令拥有自己的独立范围，那么您应该使用=（或@，如果您更喜欢传递文字字符串）将控制器变量双向绑定到指令的范围。

如果我理解正确，以下是您所追求的（简化但功能存在）。

HTML

<body ng-controller="MyCtrl">
  lat <input type="number" ng-model="capture.lat">
  lng <input type="number" ng-model="capture.lng">
  <reverse-geocode capture="capture"></reverse-geocode>
</body>

JavaScript

angular.module('app', [])
.controller('MyCtrl', function($scope) {
  $scope.capture = {
    lat: 10.0,
    lng: 20.0
  };
})
.directive('reverseGeocode', function () {
  return {
    restrict: 'E',
    scope: {
      capture: '='
    },
    template: '<div ng-bind="autoLocation"></div>',
    link: function(scope) {
      scope.$watch('capture', function() {
        if (scope.capture.lat && scope.capture.lng) {
          scope.autoLocation = 'reverse geocode address for [' +
            scope.capture.lat + ' ' + scope.capture.lng + '] here';
        } else {
          scope.autoLocation = 'invalid coordinates';
        }
      }, true);
    },
  }; 
});

【讨论】：

【解决方案2】：

这种方式是行不通的。 ng-model 仅适用于用户可以传递一些输入的输入类型元素。

您需要使用双向数据通信，以便您可以将范围变量从指令修改为与其关联的范围变量。

【讨论】：