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

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

我的<%= yield %>中有两个嵌套在if / else语句中的application.html.erb个标记。第二个标记在语句之外，它正在评估为true，导致我的partial被渲染两次。

Answer 3

我认为它加载了两次。

检入你的.js文件，用控制器映射网址。如果你在app.js或any_file.js中设置了控制器（你用控制器和视图映射url），你就不必在html中包含ng-controller ..

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

3 个答案: