Question

我一直在使用Angular中的控制器这个问题。我尽可能地查了一下，但我无法解决这个问题。

我正在尝试实现一个简单的控制器，但对于我的生活，我无法使绑定工作。它没有显示我的数据。例如，当我说{{ test }}时，我就是这样，而不是“Hello World！”字符串。

var app = angular.module('App', []);

app.controller('Hi', function($scope){
	$scope.hello = "hello!";
});

app.controller('todoCtrl', ['$scope', '$http', function($scope, $http) {
	$scope.test = "Hello World!";
	$scope.formData = "";
	
	$http.get('/api/todos')
		.success(function(data) {
			$scope.todos = data;
			console.log(data);
		})
		.error(function(data) {
			console.log('Error: ' + data);
		});
	
	$scope.createTodo = function() {
		$http.post('/api/todos', $scope.formData)
			.success(function(data) {
				$scope.formData.text = "";
				$scope.todos = data;
				console.log(data);
		})
			.error(function(data) {
				console.log('Error: ' + data);
		});
	};
	
	$scope.deleteTodo = function(id) {
		$http.delete('/api/todos/' + id)
			.success(function(data) {
				$scope.todos = data;
				console.log(data);
		})
			.error(function(data) {
				console.log('Error: ' + data);
		});
	};
}]);

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<title>TodoX</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<!-- TodoX CSS -->
		<link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
	</head>
	<body ng-controller="todoCtrl">
		<div class="container">
			<div class="row">
				<div class="jumbotron text-center">
					<h1>TodoX<span>{{todos.length}}</span>{{test}}</h1>
				</div>
				<div class="col-md-8">
					<div class="list-group">
						<div class="checkbox" ng-repeat="todo in todos | orderBy:date">
							<label class="list-group-item">
								<input type="checkbox"/> {{todo.text}}
							</label>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<form class="form-group">
						<input type="text" class="form-control" ng-model="formData"/>
						<input type="submit" ng-click="createTodo()" placeholder="Submit" class="form-control"/>
					</form>
				</div>
			</div>
		</div>
		
		<!-- Angular JS -->
		<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
		<!-- TodoX Core JS -->
		<script type="text/javascript" href="core.js"></script>
	</body>
</html>

Answer 1

我刚刚在脚本标记上方放置了角度文件链接时执行了代码，因此在脚本可以调用角度模块之前加载AngularJ。

我认为你在脚本之后放置角度，这就是你遇到这个问题的原因。你的代码工作得很好。我测试了它。

就像这样

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

此处script.js将是您的控制器脚本。

Working fiddle

角度双向绑定

1 个答案: