Question

我有一个指令，用于创建带有一组输入的表单。该指令在页面上重复多次。当我的submit函数被触发时，我无法在表单上运行验证，因为editStoryForm未定义。怎么解决这个问题？

我在这里发现的大多数问题都涉及重复表单输入而不是重复表单的验证。另外，我已经尝试将$element注入到我的指令中，以便我可以像this answer建议的那样访问我的表单对象，但是当我注入$element时，它是未定义的。

这是我的指示：

app.directive('story', ['$http', 'modal', function($http, modal) {
    return {
        replace: true,
        templateUrl: '/assets/story.html',
        transclude: false,
        scope: {
            story: '=',
            token: '@'
        },
        controller: ['$scope', '$http', 'modal', function($scope, $http, modal) {
            $scope.editStory = {
                token: $scope.token,
                id: $scope.story.id,
                title: $scope.story.title,
                published: $scope.story.published,
                file: undefined,
                questions_attributes: $scope.story.questions
            };

            $scope.submit = function(result) {
                debugger;
                if (result && $scope.editStoryForm.$valid) {
                    $http.put('/stories/' + result.id + '.json', {
                        workplace_story: result
                    }).progress(function(){
                        $scope.progress = true;
                    }).success(function(data, status, headers, config) {
                        $scope.progress = false;
                    });
                };
            };
        }]
    }
}]);

模板

<form accept-charset="UTF-8" name="editStoryForm" ng-submit="submit(editStory);" multipart="true" novalidate>
<div class="row">
    <div class="col-lg-8" style="height: 285px;overflow:hidden;overflow-y:scroll;">
        <input name="authenticity_token" type="hidden" ng-model="editStory.token">

        <div class="form-group">
            <label>Title</label>
            <input ng-disabled="story.responses.length > 0" type="text" class="form-control" name="title" ng-model="editStory.title" required>
        </div>

        <div class="form-group">
            <label>Questions</label>
            <div ng-repeat="q in editStory.questions_attributes">
                <div ng-hide="question._destroy" class="row form-group">
                    <div class="col-lg-10">
                        <input ng-disabled="story.responses.length > 0" type="text" class="form-control" ng-model="editStory.questions_attributes[$index]['question']" placeholder="What is the meaning of life, the universe, and everything?"/>
                    </div>
                    <div class="col-lg-2">
                        <a ng-if="!story.responses.length > 0" ng-click="removeQuestion($index)" class="btn btn-xs btn-danger">X</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Answer 1

$ scope.editStoryForm未在您的控制器中定义。如果你检查你的表格是否有效，那么在ng-submit方法中传递表格名称。像：

控制器中的

：

                $scope.submit = function(editStoryForm, result) {
                debugger;
                if (result && editStoryForm.$valid) {
                    $http.put('/stories/' + result.id + '.json', {
                        workplace_story: result
                    }).progress(function(){
                        $scope.progress = true;
                    }).success(function(data, status, headers, config) {
                        $scope.progress = false;
                    });
                };
            };

HTML中的

：

<form accept-charset="UTF-8" name="editStoryForm" ng-submit="submit(editStoryForm, editStory);" multipart="true" novalidate>

angular repeat表单指令不起作用editStoryForm未定义

1 个答案: