对指令中的表单的角度访问

我正在尝试为下拉列表创建一些指令：<drop-down-list />。对指令中的表单的角度访问

首先，我不知道如何给每个<select>一个独特的名称。其他SO答案表明，我不能动态地命名控件，而是将每个<select>包装在它自己的<form>（或ng-form）中。

我无法执行验证，因为在我的指令的$scope内我没有访问表单的权限。为什么表单没有出现在指令范围中？我是否应该以自己的形式包装每个<select>？

这是模板HTML：

<div class="row"> 
    <div class="col-md-12"> 
     <form name="formDDL" novalidate> 
      <div class="col-md-6"> 
       <label for="ddl">{{title}}</label> 
      </div> 
      <div class="col-md-6" data-ng-class="getControlStatus(formDDL.ddl)"> 
       <select 
        name="ddl" 
        data-ng-options="i.{{keyField}} as i.{{textField}} for i in itemSource | orderBy: orderBy" 
        data-ng-model="model" 
        data-ng-required="isRequiredCallback" 
        class="form-control"> 
        <option value="">{{defaultText}}</option> 
       </select> 
       <span data-ng-show="hasRequiredError(formDDL.ddl)" class="error">{{getRequiredErrorMessage()}}</span> 
      </div> 
     </form> 
    </div> 
</div>

这是指令代码：

application.directive('dropDownList', ['baseUrl', function (baseUrl) { 
    return { 
     restrict: 'E', 
     templateUrl: baseUrl + '/Content/templates/dropdownlist.html', 
     transclude: false, 
     replace: true, 
     scope: { 
      title: '@', 
      orderBy: '@', 
      keyField: '@', 
      textField: '@', 
      defaultText: '@', 
      requiredMessage: '@', 
      model: '=', 
      itemSource: '=', 
      isRequired: '=', 
      enableValidation: '=' 
     }, 
     controller: function ($scope) { 
      $scope.isRequiredCallback = getCallback($scope.isRequired, false); 
      $scope.isValidationEnabled = getCallback($scope.enableValidation, false); 

      $scope.getControlStatus = function (control) { 
       if (!$scope.isValidationEnabled() && !control.$dirty) { 
        return {}; 
       } 
       return { 
        'has-success': !control.$error.required, 
        'has-error': control.$error.required 
       } 
      }; 

      $scope.hasRequiredError = function (control) { 
       if (!$scope.isValidationEnabled() && !control.$dirty) { 
        return false; 
       } 
       return control.$error.required; 
      }; 

      $scope.getRequiredErrorMessage = function() { 
       return $scope.requiredMessage; 
      }; 
     } 
    }; 
}]);

可以忽略getCallback功能：它只是处理绑定的值是一个布尔或一个函数。

来源

2013-12-19 Travis Parks

请提供Plunker /小提琴与您的问题。谢谢 –

原来我有一个组合或问题。

最初，我想我可以更改控件的名称。但是，您不能输入动态名称：Dynamic validation and name in a form with AngularJS。

诀窍是给每个控件一个嵌套窗体（或ng-form）并重用相同的名称。

好吧，Chrome浏览器缓存了我的模板，所以破碎的HTML被返回。我设置了Chrome开发者工具以避免缓存。

接下来的问题是<input>必须定义ng-model才能显示在表单对象（FormController）下。这是合理的：http://docs.angularjs.org/guide/forms#binding-to-form-and-control-state。

来源

2013-12-20 02:09:04

对指令中的表单的角度访问

回答

相关问题