将 ng-model 添加到指令

Question

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

/* 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>

Answer 1

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

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

Answer 2

首先你需要删除 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);
    },
  }; 
});

将 ng-model 添加到指令

Adding ng-model to directive

directive

angularjs

angular-ngmodel