如果我多次使用我的指令，屬性總是需要最後一個被盜的值

Question

下面我使用我的自定義指令type-ahead-custom兩次一個接一個。

首次type-ahead-custom="maps" 第二次type-ahead-custom="maps1"

如果我訪問我的指令，它總是返回「maps1」 ..我怎樣才能解決這個裏面的屬性值type-ahead-custom？

這裏是plunker：https://plnkr.co/edit/hXlNJKboSlA2lAvRqYF1

<form class="form-horizontal" ng-controller="myCtrl" > 
    <div class="form-group"> 
    <div> 
     <label for="account" class="col-sm-2 col-md-2 control-label customize-label ">Typeahead 1</label> 
     <div class="col-sm-8"> 
     <div class="inner-addon right-addon"> 

      <input type="text" ng-model="selectedOptions.planes" uib-typeahead="plane as plane.formatted_address for plane in search($viewValue)" type-ahead-custom="maps" typeahead-loading="loadingdata" typeahead-no-results="noResults" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-4-8758" /> 
     </div> 
     </div> 
    </div> 
    </div> 

     <div class="form-group"> 
    <div> 
     <label for="account" class="col-sm-2 col-md-2 control-label customize-label ">Typeahead 2</label> 
     <div class="col-sm-8"> 
     <div class="inner-addon right-addon"> 

      <input type="text" ng-model="selectedOptions.plants" uib-typeahead="plane as plane.formatted_address for plane in search($viewValue)" type-ahead-custom="maps1" typeahead-loading="loadingdata" typeahead-no-results="noResults" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-4-8758" /> 
     </div> 
     </div> 
    </div> 
    </div> 
</form> 

//代碼放在這裏

var exampleApp = angular.module('exampleApp', ['ui.bootstrap']); 

exampleApp.directive('typeAheadCustom', function($http, $q) { 
return { 
    link: function($scope, $element, $attributes) { 


     $scope.search = function(newValue) { 

      console.log($attributes.typeAheadCustom); 
     var dfr = $q.defer(); 
     $http.get('//maps.googleapis.com/maps/api/geocode/json', { 
      params: { 
       address: newValue, 
       sensor: false 
       } 
      }).success(function(data) { 

       dfr.resolve(data.results); 

      }); 

      return dfr.promise; 

     }; 

    } 
} 
}); 

exampleApp.controller('myCtrl', function($http,$scope) { 
    $scope.selectedOptions = {}; 
}); 

Answer 1

問題是你是不是爲您創造指令一個新的範圍，基本上他們都共享相同的範圍，無論他們被應用。

因此，當您註冊您的指令的第一個實例$scope.search方法在$attributes.typeAheadCustom值map的相同範圍內創建。

和2日指令執行它將覆蓋這是由1st directive例如&具有$attributes.typeAheadCustom值map1創建的舊$scope.search方法。

所以這就是爲什麼當你打電話給search的方法，它總會有最新的$attributes.typeAheadCustom值。

要解決你的問題，我建議你創建一個隔離範圍的指令。這意味着指令將有其新的範圍。因此，無論您在何處放置您的指令，都不會出現這種類型的問題，但指令將作爲單獨的組件運行，但是在同一頁面上實例化它時。

現在您的指令範圍與指令所在的頁面範圍不同，因此您無法在指令內訪問該控制器值，因此您需要使用內部隔離scope: { ... }綁定來傳遞所需的值。

Answer 2

由於指令的實例化與其他指令共享範圍，因此可以根據指令的屬性值將函數添加到範圍。

var exampleApp = angular.module('exampleApp', ['ui.bootstrap']); 

exampleApp.directive('typeAheadCustom', function($http, $q) { 
return { 
    link: function(scope, elem, attrs) { 
     //create object on scope 
     scope[attrs.typeAheadCustom] = {}; 
     var vm = scope[attrs.typeAheadCustom]; 
     //put function on object 
     vm.search = function(newValue) { 
      var message=attrs.typeAheadCustom + 
         '=' + newValue; 
      console.log(message); 
      // 
      //Do more stuff 
     }; 

    }; 
}); 

因此，不同實例化的搜索功能具有不同的名稱。

<input type="text" ng-model="selectedOptions.planes" 
    type-ahead-custom="maps1" 
    uib-typeahead="plane as plane.formAddress for plane 
        in maps1.search($viewValue)" 
> 

<input type="text" ng-model="selectedOptions.planes" 
    type-ahead-custom="maps2" 
    uib-typeahead="plane as plane.formAddress for plane 
        in maps2.search($viewValue)" 
>