模板没有使用angularjs中的正确数据填充

时间:2017-01-04 21:15:26

标签: angularjs

我是angularjs的新手,我不知道为什么模板不会填充来自controllers.js文件的数据。脚本标记中的所有路径都是正确的。有帮助吗?顺便说一句,这是角1。



var myApp = angular.module('myApp',[]);

myApp.controller('MyController', function MyController($scope) {
	//Create a model, basically, the data
	$scope.author = {
		'name': 'Some author'
		'title': 'Author'
		'company': 'lynda.com'
	}
	//After creating the data (author), we need to use it in the view (html)
});






<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="utf-8">
	<title>Angular Demo</title>
	<script type="text/javascript" src="lib/angular/angular.min.js"></script>
	<script src="js/controllers.js"></script>
</head>
<body>
	
	<input type="text" ng-model="name">
	<h2>Welcome {{name}}</h2>
	
	
	<div ng-controller="MyController">
		<h1>{{author.name}}</h1>
		<p>{{author.title + ',' + author.company}}</p>
	</div>
	
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

如果这是您的实际代码,则问题是$scope.author对象中缺少逗号。

Developer's Console中的输出清楚地表明了这一点。学习使用浏览器的开发者控制台 - 它将是在Angular中开发的绝对必要的工具。

这是你的代码 - 添加了逗号 - 工作。点击运行获取代码段。

var myApp = angular.module('myApp',[]);

myApp.controller('MyController', function MyController($scope) {
	//Create a model, basically, the data
	$scope.author = {
		'name': 'Some author',
        // added comma here ---------^
		'title': 'Author',
        // and another here -----^
		'company': 'lynda.com'
	}
	//After creating the data (author), we need to use it in the view (html)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="utf-8">
	<title>Angular Demo</title>
	<script type="text/javascript" src="lib/angular/angular.min.js"></script>
	<script src="js/controllers.js"></script>
</head>
<body>
	
	<input type="text" ng-model="name">
	<h2>Welcome {{name}}</h2>
	
	
	<div ng-controller="MyController">
		<h1>{{author.name}}</h1>
		<p>{{author.title + ',' + author.company}}</p>
	</div>
	
</body>
</html>