网页显示使用Angular1.4的表达式中的大括号

Webpage is displaying curly braces from expressions using Angular1.4

本文关键字：表达式 显示 Angular1 网页      更新时间：2023-09-26

由于我是Angular的新手，我希望遇到一些问题，但这个问题似乎时断时续。

当我在这里学习Angular的教程时，我正在学习如何使用表达式。

我试图做的是访问gem的属性并将其显示在网页上。然而，对象值没有被访问，它只是这样显示：

｛｛store.product.name｝｝

$｛｛store.product.price｝｝

｛｛store.product.description｝｝

添加到购物车

我希望它显示为：

Dodechaderon

2.95美元/年

添加到购物车

我想这可能是因为视频使用了Angular1.2，而我使用的是1.4，但我不确定。我做错了什么？如何正确显示对象属性？

这是代码：

(function () {
	var app = angular.module('store', []);
app.controller('StoreController', function(){
	this.product = gem;
});
var gem = {
	name: 'Dodecahaderon',
	price: 2.95,
	description: '. . . ',
	canPurchase = true,
	soldOut = true
};
})();
<!DOCTYPE html>
    <html ng-app="store">
	<head>
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
	</head>
	<body ng-controller="StoreController as store">
		<div ng-hide="store.product.soldOut">
			<h1>{{store.product.name}}</h1>
			<h2>${{store.product.price}}</h2>
			<p>{{store.product.description}}</p>
			<button ng-show="store.product.canPurchase">Add to Cart</button>
		</div>
		<script type="text/javascript" src="angular.min.js"></script>
		<script type="text/javascript" src="app.js"></script>
	</body>
</html>

角度库没有被正确引用。打开控制台窗口，确保角度脚本引用确实有效。

当前gem在控制器范围之外定义。此外，作为gem对象，您必须将=更改为:

你需要将你的代码更改为这个，它可以

(function () {
  var app = angular.module('store', []);
app.controller('StoreController', function(){
  this.item = {
    name: 'Dodecahaderon',
    price: 2.95,
    description: '. . . ',
    canPurchase : true,
    soldOut : true
  };

});
})();

和你的html到这个：

<!DOCTYPE html>
    <html ng-app="store">
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut">
      <h1>{{store.item.name}}</h1>
      <h2>${{store.item.price}}</h2>
      <p>{{store.item.description}}</p>
      <button ng-show="store.item.canPurchase">Add to Cart</button>
    </div>

  </body>
</html>

此外，您可能需要将角度参考从<script type="text/javascript" src="angular.min.js"></script>替换为<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></sc‌​ript>

相关文章：