$scope内部指令不起作用

Question

我跟随This fiddle在我的ionic应用程序中实现了同样的功能。

以下是我的指令：

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。