AngularJS提交功能不起作用答案

【问题标题】：AngularJS submit function not workingAngularJS提交功能不起作用
【发布时间】：2014-09-07 14:56:32
【问题描述】：

我第一次体验 AngularJS，我已经用 laravel 作为后端构建了很多东西。所以我安装了 laravel 并创建了一个 index.blade.php 文件。其中我有一个ng-submit，但我无法让它工作。

<!doctype html>

<html lang="en" ng-app>

    <head>

        <meta charset="UTF-8">
        <title>Laravel and AngularJS test</title>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="/js/main.js"></script>

    </head>

    <body>

        <div ng-controller="TodoController">

            <h1>Todo</h1>

            <input type="text" placeholder="Search todos" ng-model="search">

            <ul>

                <li ng-repeat="to in todos | filter:search">

                    @{{ todo.body }}

                </li>

            </ul>

            <form ng-submit="addTodo()">

                <input type="text" placeholder="Add a todo" ng-model="newTodo">
                <button type="submit">Add todo</button>

            </form>

        </div>

    </body>

</html>

main.js

function TodoController($scope) {

    $scope.todos = [

        { body: 'Groceries' },
        { body: 'Drive' }

    ];

    $scope.addTodo = function() {

        $window.alert('test');


    };

}

【问题讨论】：

是否有任何控制台错误？
没有，如果有的话会容易得多。

标签： javascript php angularjs laravel

【解决方案1】：

有一个fiddle

angular.module('todoApp', [])
.controller('TodoController', ['$scope', '$window', function ($scope, $window) {

    $scope.todos = [

        { body: 'Groceries' },
        { body: 'Drive' }

    ];

    $scope.addTodo = function() {

        $window.alert('test');


    };

}]);

与html类似：

<div ng-app="todoApp">     
    <div ng-controller="TodoController">

        <h1>Todo</h1>

        <input type="text" placeholder="Search todos" ng-model="search">

        <ul>

            <li ng-repeat="to in todos | filter:search">

                @{{ to.body }}
            </li>

        </ul>

        <form ng-submit="addTodo()">

            <input type="text" placeholder="Add a todo" ng-model="newTodo"/>
            <button type="submit">Add todo</button>

        </form>

    </div>
</div>

【讨论】：

我复制/粘贴了你的东西，但后来我得到了Uncaught Error: [$injector:modulerr]
Failed to instantiate module todoApp due to: Error: [$injector:nomod] http://errors.angularjs.org/1.2.5/$injector/nomod?p0=todoApp
好吧，错误就是进步！我知道这些愚蠢的问题，但是您的 main.js 文件肯定被正确加载了吗？您的 HTML 中是否只有一个 ng-app 声明？如果它在 html 标签上而不是在 div 中，那很好，但如果你已经复制了 js 行，请确保它是 ng-app="todoApp"。
是的，只有一个 ng-app 声明，现在在 <html> 标签上。但是，我的猜测是 main.js 文件没有开始正确加载，因为它是 Laravel。
嗯，原来它与缓存有关。我查看了页面代码，发现main.js 的初稿正在加载中。它现在正在工作。

【解决方案2】：

function TodoController($scope,$window) { .....

尝试用这种方式修改:)

【讨论】：

是的，这就是奇怪的部分。并且警报只是为了测试，我想将输入的文本添加到列表中。
<form ng-submit="addTodo(newTodo)"> ..

【解决方案3】：

Controller 应该在 main.js 中定义如下

angular.module('todoApp', []) .controller('TodoController', ['$scope', function($scope) {

}]);

在 html 标签中将 ng-app 命名为 ng-app='todoApp'

【讨论】：