Question

我正在学习AngularJs并且我完成了一些互联网课程我知道什么是模块，控制器，服务，我知道一些基本指令，我在互联网上找到了一个基本的AngularJs视频教程，我在这里做的就像这样视频，但无法理解为什么它不起作用。这是我的代码

var app = angular.module('todoApp', []);


app.controller('todoCtrl', ['$scope', function($scope) {
	$scope.todos = [
		{
			text: "Learn AngularJs"
		},
		{
			text: "Build App"
		}
	];

	$scope.addTodo = function() {
		$scope.todos.push({text: $scope.todoText});
	};
}]);

<html ng-app="todoApp">
<head>
	<title>todo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="/underscore-master/underscore-min.js"></script>
	<script src="todo.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
	<div ng-controller="todoCtrl">
		<h2>Total todos: {{todos.length}}</h2>
		<ul class="unstyled">
			<li ng-repeat="todo in todos">
				<span>{{todo.text}}</span>
			</li>
		</ul>
	</div>
	<form class="form-horizontal">
		<input type="text" ng-model="todoText">
		<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
	</form> 
</body>
</html>

它应该在我的数组中插入新文本，但是当我按下按钮时没有任何反应，控制台中没有错误，我真的不明白为什么？

Answer 1

ng-click事件超出了控制器的范围。快速回答是将ng-controller="todoCtrl"移动到封闭/外部元素，在这种情况下为body。

Answer 2

将ng-controller属性移动到<body> - 以便它包含表单和ng-click事件。例如：

＆＃13;

var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
	$scope.todos = [
		{
			text: "Learn AngularJs"
		},
		{
			text: "Build App"
		}
	];

	$scope.addTodo = function() {
		$scope.todos.push({text: $scope.todoText});
	};
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="todoApp">
<body ng-controller="todoCtrl">
	<div>
		<h2>Total todos: {{todos.length}}</h2>
		<ul class="unstyled">
			<li ng-repeat="todo in todos">
				<span>{{todo.text}}</span>
			</li>
		</ul>
	</div>
	<form class="form-horizontal">
		<input type="text" ng-model="todoText">
		<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
	</form> 
</body>
</html>

＆＃13;

Answer 3

model和functions应该在范围内使用，因此您需要在addTodo范围内调用todoCtrl函数。只需添加一个包装器并在那里安装控制器。

＆＃13;

var app = angular.module('todoApp', []);


app.controller('todoCtrl', ['$scope', function($scope) {
	$scope.todos = [
		{
			text: "Learn AngularJs"
		},
		{
			text: "Build App"
		}
	];

	$scope.addTodo = function() {
		$scope.todos.push({text: $scope.todoText});
	};
}]);

＆＃13;

<html ng-app="todoApp">
<head>
	<title>todo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="/underscore-master/underscore-min.js"></script>
	<script src="todo.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
	<div ng-controller="todoCtrl" class="wrapper">
    <div>
		<h2>Total todos: {{todos.length}}</h2>
		<ul class="unstyled">
			<li ng-repeat="todo in todos">
				<span>{{todo.text}}</span>
			</li>
		</ul>
	</div>
	<form class="form-horizontal">
		<input type="text" ng-model="todoText">
		<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
	</form>
<div>
</body>
</html>

＆＃13;

未调用控制器功能

3 个答案: