Angular.js：控制器值未显示在HTML页面中
[英]Angularjs : Controller values not getting displayed in html page
问题描述
I've just started learning angular.js . 
我刚刚开始学习angular.js。 I wrote a basic controller in app.js file and set its property. 我在app.js文件中编写了一个基本控制器，并设置了它的属性。 I'm trying to access this data inside html page but in vain. 我正在尝试在html页面中访问此数据，但徒劳。 Controller property values are not getting shown in webpage. 控制器属性值未在网页中显示。 Below is the code : 下面是代码：
app.js : app.js：
(function(){
var app = angular.module('gemStore',[]);
var gem = {name: 'Diamond', price: 120, description: 'Hard'};
app.controller('StoreController', function() {
this.product = gem;
});
})();
index.html index.html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" ></script>
<script type="text/javascript" src="js/app.js" ></script>
<p> {{"Hello, Angular!"}}</p>
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<h3>{{store.product.description}}</h3>
</div>
</body>
</html>
Please tell me where am i going wrong!! 请告诉我我要去哪里错了！
5 个解决方案
解决方案1
2 2014-11-04 11:38:13
Your AngularJS version doesn't supports StoreController as store syntax. 您的AngularJS版本不支持StoreController as store语法。 Change it to StoreController and simply remove the store s. 将其更改为StoreController ，只需删除store 。 Also you must inject the scope object into the controller and set its properties instead. 另外，您还必须inject scope对象注入控制器并设置其属性。
Here is the updated and working code. 这是更新的工作代码。
var app = angular.module('gemStore', []); var gem = { name: 'Diamond', price: 120, description: 'Hard' }; app.controller('StoreController', ['$scope', function($scope) { $scope.product = gem; } ]);
<!DOCTYPE html> <html ng-app="gemStore"> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> <p>{{"Hello, Angular!"}}</p> <div ng-controller="StoreController"> <h1>{{product.name}}</h1> <h2>{{product.price}}</h2> <h3>{{product.description}}</h3> </div> </body> </html>
解决方案2
2 已采纳 2014-11-04 11:42:23
The "controller as"-syntax was added in 1.2.0 (or thereabouts), I don't think it was in 1.0.7. 1.2.0（或左右）中添加了“ controller as”语法，我不认为它在1.0.7中。 Try using a newer version of Angular. 尝试使用较新版本的Angular。 If you're stuck with 1.0.7 then you need to use $scope . 如果您坚持使用1.0.7，则需要使用$scope 。
解决方案3
1 2014-11-04 11:42:06
The controller as syntax in angular was introduced in version 1.2 and you are using version 1.0.7. 在1.2版中引入了使用angular语法的控制器，并且您正在使用1.0.7版。 If you update the version of angular in your script tags to 1.2 or above it will work fine. 如果将脚本标签中的angular版本更新为1.2或更高版本，则可以正常使用。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js" ></script>
You can also see this working fine on the following link: http://jsbin.com/tadinesime/2/edit 您还可以在以下链接上看到此工作正常： http : //jsbin.com/tadinesime/2/edit
I hope this helps. 我希望这有帮助。
解决方案4
0 2014-11-04 11:38:13
Set 组
ng-app="gemStore"
on the body (or in whatever html tag which contains your angularjs code) 在正文上（或包含您的angularjs代码的任何html标签中）
here's the jsfiddle: http://jsfiddle.net/49yrj986/ 这是jsfiddle： http : //jsfiddle.net/49yrj986/
解决方案5
0 2015-02-28 11:57:32
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.