Hinzufügen ng-Modell

I die Richtlinie hat die folgenden Direktive geocode einen lat & lang in einen Ort zu umkehren:Hinzufügen ng-Modell

/* 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 
     } 
    });

Aber aus irgendeinem Grunde, es scheint nicht zu dem ng-Modell und Anzeige abrufen es:

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

Was mein Ziel ist es, die Lage anzuzeigen unter Verwendung von:

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

Quelle

2016-08-13 Pex

Können Sie –

auch eine Arbeits plunkr/Geige liefern, wo ist der Clo sing tag der 'reverse-geocode'-Direktive? –

Zuerst müssen Sie restrict löschen oder mindestens E (Element) anstelle von A (Attribut) verwenden, da Sie die Direktive als Element verwenden.

Zweitens müssen Sie die Richtlinie ng-model, die eine Direktive selbst ist, nicht hinzufügen oder übergeben. Sie können direkt auf die Steuerungsbereichsvariable capture zugreifen. Wenn Sie bevorzugen, dass die Anweisung einen eigenen, isolierten Bereich hat, dann sollten Sie die Controller-Variable bidirektional an den Bereich der Direktive binden, indem Sie = (oder @, wenn Sie die Weitergabe von Literalstrings bevorzugen) verwenden.

Wenn ich richtig verstanden habe, ist unten was du willst (vereinfacht aber Funktionalität ist da).

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); 
    }, 
    }; 
});

Quelle

2016-08-13 16:10:09

es wird nicht in der Arbeit Weg. ng-model funktioniert nur für Eingabe-Element, wo ein Benutzer einige Eingaben übergeben kann.

Sie müssen bidirektionale Datenkommunikation verwenden, damit Sie eine Bereichsvariable von der Anweisung in die zugehörige Variable des Bereichs ändern können.

Quelle

2016-08-13 15:09:05

Hinzufügen ng-Modell

Antwort

Verwandte Themen