HTML Angular 表单在页面上出现两次

Question

我遇到了一个看似菜鸟的问题。我有一个简单的 Angular 控制器来控制页面上的表单。表单的标记非常简单。当我加载页面时，我看到表单呈现了两次，而不是它应该呈现的一次。我在这里做错了什么？

这是我的 HTML:

<div class="container">
    <div class="col-lg-12">
        <div class="row">
            <h2>CREATE</h2>
            <div class="col-lg-6 col-lg-offset-2">
                <div class="form-container" ng-controller="NewPostQuestionCtrl">
                    <form accept-charset="UTF-8" name="form.postQuestionForm" ng-submit="createPostQuestion(postQuestion)" class="new_post_item" novalidate>
                        <input name="utf8" type="hidden" value="✓">
                        <input name="authenticity_token" type="hidden" ng-model="postQuestion.token" ng-init="postQuestion.token='<%= form_authenticity_token %>'">
                        <input name="employer_id" type="hidden" ng-model="postQuestion.employer_id" ng-init="postQuestion.employer_id='<%= current_employer.id %>'">

                        <div class="form-group">
                            <label>Question</label>
                            <textarea class="question-textbox" name="question" ng-model="postQuestion.question" required></textarea>
                        </div>

                        <div class="form-group">
                            <label>Image</label>
                            <input class="" name="image" ng-model="postQuestion.image" type="file" required>
                        </div>

                        <div class="form-group">
                            <label>Publish Question</label>
                            <select class="" name="published" ng-model="postQuestion.published" required>
                                <option value="true">Publish</option>
                                <option value="false">Don't Publish</option>
                            </select>
                        </div>

                        <input class="submit-btn" name="commit" type="submit" value="Publish Post" ng-disabled="form.postQuestion.$invalid">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的控制器：

app.controller('NewPostQuestionCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.form = {}
    $scope.postQuestion = {
        token: $scope.token,
        employer_id: $scope.employer_id,
        question: $scope.question,
        published: $scope.published,
        image: $scope.image
    };
}]);

谢谢！

Answer 1

您有完整的 HTML 申请表吗？是只渲染两次的表单还是 h2 元素？是否可以在标记中两次使用 ng-view 指令？

希望对您有所帮助！

Answer 2

我认为这对任何人都没有帮助，但我发现了我的问题，这是一个非常明显的疏忽。

我的 application.html.erb 中有两个 <%= yield %> 标记，它们嵌套在 if/else 语句中。第二个标记在语句之外，它的计算结果为真，导致我的部分被渲染两次。

Answer 3

我认为它加载了两次。

检查您的 .js 文件，其中您将 url 与控制器映射。如果您在 app.js 或 any_file.js 中设置了控制器（您将 url 映射到控制器和视图），则不必在 html 中包含 ng-controller ..

HTML Angular 表单在页面上出现两次

HTML Angular form appears twice on page

html

angularjs