Angularjs自定义表单控件作用域重复

Angularjs custom form control scope is duplicated

本文关键字：作用域 控件 自定义 表单 Angularjs      更新时间：2023-09-26

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

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

scope-如果设置为：

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

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

replace: true

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

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

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

相关文章：