Angularjs自定义窗体控件范围被复制

Question

我创建了一个简单的angularjs指令来输入城市和邮政编码。它工作正常，但如果我在同一个控制器中使用了两次，则输入字段中的值将被复制！ 我认为这是一个范围问题，但我不知道如何解决它？

FDVilleModule = angular.module('FDVille', []). 
    directive('fdVille',() -> 
    return { 
     restrict: 'E' 
     require: 'ngModel' 

     template: """                                                                
     <div class=\"row-fluid\">                                                            
      <div class=\"span4\">                                                             
      <input                                                                
       ng-model=\"cp\"                                                             
       ng-change=\"edit()\"                                                            
       maxlength=\"5\"                                                             
       type=\"text\"                                                              
       class=\"input-block-level\"                                                          
       placeholder=\"Code Postal\" />                                                          
      </div>                                                                 
      <div class=\"span8\">                                                             
      <select ng-model=\"selected_ville\"                                                         
       ng-options=\"v.id as v.nom for v in villes\"                                                      
       class=\"input-block-level\">                                                          
      </select>                                                               
      </div>                                                                 
     </div>""" 

     link: (scope, elem, attr, ctrl) -> 
     scope.$watch('selected_ville', (value)-> 
      ctrl.$setViewValue(value)) 

     controller: ($scope) -> 
     download_villes = (cp) -> $.getJSON('/ws/villes/cp', {cp:cp}, set_data) 
     download_villesid = (id) -> $.getJSON('/ws/villes/id', {id:id}, set_init_data) 

     set_data = (results) -> 
      $scope.villes = results 
      $scope.selected_ville = results[0].id if results.length 
      $scope.$apply() 

     saved_cp = "" 
     $scope.edit =() -> 
      if isNaN($scope.cp) 
      $scope.cp = saved_cp 
      else 
      saved_cp = $scope.cp 
      if saved_cp.length == 5 
       download_villes(saved_cp) 
      else 
       $scope.selected_ville = null 
       $scope.villes = [] 
    } 
) 

Answer 1

其实我找到了答案在docs：

范围 - 如果设置为：

如此 - 那么新的范围将这个指令创建。如果 同一元素上的多个指令请求一个新范围，则仅创建一个新的范围 。新范围规则不适用于模板的根 ，因为模板的根始终获取新的 范围。

Answer 2

在另一些情况下，你可以尝试

replace: true 

注意：你需要有一个根元素。

这里的链接到文件为我们的读者谁不知道：

http://docs.angularjs.org/guide/directive