추가 NG-모델은 강령

I 위도 & 길이로 장소를 지오 코드를 리버스 다음 지시문이 있습니다 추가 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 ng-if="capture.geo">Place: {{autoLocation}}</div>

출처

2016-08-13 Pex

, 어디 CLO입니다 '역 지오 코드 (reverse-geocode) '지시어를 부르시겠습니까? –

를 제공 할 수

–

먼저 지시문을 요소로 사용하므로 restrict을 삭제하거나 A (특성) 대신 E (요소)을 사용해야합니다.

두 번째로 지시어 인 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>

자바 스크립트는

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

당신은 또한 작업 plunkr/바이올린

출처

2016-08-13 16:10:09

그것은 그에서 작동하지 않습니다 :

내 목표는 무엇

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

사용하여 아래의 위치를 표시하는 것입니다 방법. ng-model은 사용자가 일부 입력을 전달할 수있는 입력 유형 요소에 대해서만 작동합니다.

지시어에서 범위 변수를 수정할 수 있도록 양방향 데이터 통신을 사용해야합니다.

출처

2016-08-13 15:09:05

답변

관련 문제