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

实际上我在文档中找到了答案：

范围 - 如果设置为：

true - 然后将为此指令创建一个新范围。如果   同一元素上的多个指令请求一个新的范围，只有一个   新范围已创建。新范围规则不适用于根   因为模板的根总是得到一个新的模板   范围。

Answer 2

在其他一些情况下，您可以尝试

replace: true

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

以下是我们不知道的读者的文档链接：

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

Angularjs自定义表单控件范围是重复的

2 个答案: