Question

我正在跟踪This fiddle在我的离子应用中实现相同的功能。

这是我的指示：

angular.module('mobApp.services').
            directive('googlePlaces', function(){
                return {
                    restrict:'E',
                    replace:true,
                    // transclude:true,
                    scope: {location:'='},
                    template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
                    link: function($scope, elm, attrs){
                        var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
                        google.maps.event.addListener(autocomplete, 'place_changed', function() {
                            var place = autocomplete.getPlace();
                            $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                            $scope.$apply();
                        });
                    }
                }
            });

这里我在控制器中使用它：

angular.module("mobApp.controllers")
.controller("AutocompleteTextboxController",function($scope) {

   $scope.location = '';
  $scope.selectionDone = function() {
      alert('Yay. Location: ' + $scope.location);
  }
});

我在这里称这个指令为

<ion-view view-title="{{title}}">
<ion-nav-bar class="bar-positive">          
    <ion-nav-back-button></ion-nav-back-button>
    <ion-nav-buttons side="right">
      <button class="button button-icon icon ion-android-done" ng-disabled="selectedItem.id==''" ng-click="selectionDone()"></button>
    </ion-nav-buttons>    
</ion-nav-bar>
  <ion-content>
    <div class="list">
      <ion-list ng-show="selectionType == 'place'">
        <google-places location=location></google-places>
      </ion-list>
    </div>    
  </ion-content>
</ion-view>

Answer 1

尝试更换：

$scope

带

scope

在你的指令中。 $表示您正在注入范围，实际上您不在链接函数中。有一个很好的解释是here。

指令范围内的$ scope不起作用

1 个答案: