Question

我正在尝试为下拉列表创建一些指令：<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函数：它只处理绑定值为布尔或函数。

Answer 1

事实证明我有一个或多个组合。

最初，我以为我可以更改控件的名称。但是，您无法输入动态名称：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。

对指令内表单的角度访问

1 个答案: