2

我创建了一个简单的 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 = []
    }
  )
4

2 回答 2

0

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

范围 - 如果设置为:

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

于 2013-02-25T12:15:01.740 回答
0

在其他情况下,您可以尝试

replace: true

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

这是我们不知道的读者的文档链接:

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

于 2013-04-28T20:00:43.747 回答