添加NG-模型來指導

我有以下指令反向地理經緯度&長成的地方：添加NG-模型來指導

/* 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-模型和顯示器它：

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

來源

2016-08-13 Pex

你能提供一個工作plunkr /小提琴 –

此外，哪裏是CLO唱'reverse-geocode'指令的標籤？ –

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

來源

2016-08-13 16:10:09

它不會在那工作辦法。 ng-model僅適用於用戶可以傳遞某些輸入的輸入類型元素。

您需要使用雙向數據通信，以便您可以將範圍變量從指令修改爲與其關聯的範圍變量。

來源

2016-08-13 15:09:05

添加NG-模型來指導

回答

相關問題