我第一次体验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');
};
}
有一个小提琴
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>
function TodoController($scope,$window) { .....
尝试用这种方式修改：）
控制器应在main.js 中定义如下
angular.module('todoApp', []) .controller('TodoController', ['$scope', function($scope) {
}]);
将ng-app的名称赋予html标签中的ng-app='todApp'