Question

我刚开始学习angular.js。我在app.js文件中编写了一个基本控制器并设置了它的属性。我试图在html页面内访问这些数据但是徒劳无功。控制器属性值未显示在网页中。以下是代码：

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

<!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>

请告诉我我哪里错了!!

Answer 1

您的AngularJS版本不支持StoreController as store语法。将其更改为StoreController，然后只需删除store。此外，您必须inject将scope对象放入控制器并改为设置其属性。

以下是更新后的工作代码。

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>

Answer 2

“控制器为”-syntax在1.2.0（或左右）中添加，我不认为它是在1.0.7中。尝试使用较新版本的Angular。如果您遇到1.0.7，那么您需要使用$scope。

Answer 3

在1.2版本中引入了作为angular语法的控制器，您使用的是版本1.0.7。如果您将脚本标记中的角度版本更新为1.2或更高版本，它将正常工作。

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js" ></script>

您还可以通过以下链接查看此工作正常：http://jsbin.com/tadinesime/2/edit

我希望这会有所帮助。

Answer 4

设置

ng-app="gemStore"

在正文上（或包含你的angularjs代码的任何html标签）

这里是jsfiddle： http://jsfiddle.net/49yrj986/

Answer 5

如果其他人想要尝试这些教程，这是http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/2/our-first-controller的课程

Angularjs：控制器值未在html页面中显示

5 个答案: