Question

我是AngularJS的新手。我刚用Code School尝试过。这是我的代码。控制器没有执行。我的错误在哪里？

这是HTML文件

<html ng-app="store">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div ng-controller="StoreController as store">
    <h1> {{store.product.name}} </h1>
    <h2> $ {{store.product.price}} </h2>
    <p> {{store.product.description}} </p>
</div>
<div>
</div>
</body>
</html>

这是app.js文件

(function(){
  var app = angular.module('store', [ ]);
  app.controller('StoreController', function(){
    this.product = gem;
  });

  var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description: '. . .',
  }
})();

Answer 1

AngularJS将使用$ scope对象调用StoreController。 $ scope是应用程序对象（应用程序变量和函数的所有者）。

在app.js中：

(function(){
  var app = angular.module('store', [ ]);
  app.controller('StoreController', function($scope){
    $scope.product = gem;
  });

  var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description: '. . .',
  }
})();

在html中：

 <body ng-controller="StoreController as store">
    <h1> {{product.name}} </h1>
    <h2> $ {{product.price}} </h2>
    <p> {{product.description}} </p>
  </body>

Answer 2

你必须在控制器内部使用$ scope，然后才能使用它

  (function(){
  var app = angular.module('store', [ ]);
  app.controller('StoreController', function($scope){
    $scope.product = gem;
  });

  var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description: '. . .',
  }
})();

AngularJS控制器未执行

2 个答案: