Question

我第一次尝试使用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');


    };

}

Answer 1

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

尝试用这种方式修改：）

Answer 2

控制器应该在main.js

中定义如下

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

}]);

将ng-app的名称命名为html标记中的ng-app ='todoApp'

Answer 3

拥有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>

AngularJS提交功能不起作用

3 个答案: