ng-submit 在 Laravel PHP 框架中不起作用

Posted

技术标签:

【中文标题】ng-submit 在 Laravel PHP 框架中不起作用【英文标题】:ng-submit is not working in Laravel PHP framework 【发布时间】:2019-01-04 02:40:07 【问题描述】:

大家,我还有一个关于 Laravel/AngularJS 的问题。

在我的迷你项目中,我有用户可以在表单中发布问题的表单,但是当我单击 submit 按钮时,没有请求(来自 Google Chrome 中的检查)。但是,我有一个Log in 界面,按钮工作得很好。我使用相同的逻辑,相同的 html 结构。我想知道如何解决这个问题。

我已经调试了 2 个小时,谷歌搜索了很长时间。请帮帮我!!

下面是代码。

// 添加问题页面

<script type="text/ng-template" id="question.add.tpl">
    <div ng-controller="QuestionAddController" class="question-add container">
        <div class="card">
            <form name="question_add_form" ng-submit="Question.add()">
                <div class="input-group">
                    <label>Title</label>
                    <input type="text"
                           name="title"
                           ng-minlength="5"
                           ng-maxlength="255"
                           ng-model="Question.new_question.title"
                           required>
                </div>
                <div class="input-group">
                    <label>Description</label>
                    <textarea type="text"
                              name="desc"
                              ng-model="Question.new_question.desc">
                    </textarea>
                </div>
                <div class="input-group">
                    <button ng-disabled="question_add_form.$invalid"
                            class="primary"
                            type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</script>

// 服务和控制器

.service('QuestionService', [
    '$http',
    '$state',
    function ($http, $state) 
        var me = this;
        me.new_question = ;

        me.go_add_question = function () 
            console.log(1);
            $state.go('question.add');
        ;

        me.add = function () 
            if (!me.new_question.title)
                return;

            $http.post('/api/question/add', me.new_question)
                .then(function (r) 
                    console.log('r', r);
                    // if (r.data.status) 
                    //     console.log(r.data);
                    //     me.new_question = ;
                    //     $state.go('home');
                    // 
                , function (e) 
                    console.log('e', e);
                )
        
    
])


.controller('QuestionAddController', [
    '$scope',
    'QuestionService',
    function (QuestionService, $scope) 
        $scope.Question = QuestionService;
    
])

QuestionService.add() 中,我的浏览器中没有“返回值”(console.log('r', r);)。

我通过直接在浏览器中输入地址来确保路由和 url 工作正常。任何建议将不胜感激!

提前致谢!!!

编辑:

此外,Add Question 按钮也不起作用。我必须使用ui-sref 使其重定向到目标网址,这是否是submit 按钮不起作用的原因(比如我使用ui-sref 而不是ng-submit 来重定向)

// 添加问题

<div class="navbar clearfix">
    <div class="container">
        <div class="fl">
            <div class="navbar-item brand">somethingHere</div>
            <form ng-submit="Question.go_add_question()" id="quick_ask" ng-controller="QuestionAddController">
                <div class="navbar-item">
                    <input ng-model="Question.new_question.title" type="text">
                </div>
                <div class="navbar-item">
                    <button ui-sref="question.add" type="submit">Add question</button> <!--ui-sref="question.add"-->
                </div>
            </form>
        </div>
        <blablabla something not important here!!!!>

【问题讨论】:

开发者控制台中的网络标签显示什么? 您好,感谢您与我们联系。在Network-&gt;XHR 面板中,什么也没有出现。我很困惑。我重新启动服务器,仍然没有任何反应。 【参考方案1】:

您在控制器中的注射顺序错误。应该是

.controller('QuestionAddController', [
    '$scope',
    'QuestionService',
    function ($scope, QuestionService) 
        $scope.Question = QuestionService;
    
])

编辑: 排序本身并不重要,但控制器函数参数排序必须与数组中的排序匹配。例如

正确:

['QuestionService', 'Service2', '$scope', function(QuestionService, Service2, $scope)  ...

不正确:

['QuestionService', 'Service2', '$scope', function(QuestionService, scope, Service2)  ...

之所以用数组定义控制器,是为了让代码可以是minified

【讨论】:

天啊!!!!有用!!!!!所以像$scope$http 这样的变量应该总是第一个参数吗?能不能给我解释一下!!!!!太感谢了!!!!!!!! ^_^

以上是关于ng-submit 在 Laravel PHP 框架中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 等待提交表单(ng-submit)

选择框 laravel 未定义的变量

[php]laravel框架容器管理的一些要点

选择框的组件在 laravel 中的视图格式中不起作用

Angular - 无法使用 ng-submit 获取选定的 ng-repeated 单选按钮

当浏览器预填充表单字段时,AngularJS“ng-submit”有问题吗?