在<h3>标记</h3>中显示产品的名称

时间:2015-01-22 17:44:59

标签: javascript jquery angularjs backbone.js javascript-events

  1. 我正在学习角度js

  2. 我正在做小事......

  3. 但是我收到此错误显示内部产品的名称 标签。

  4. 你能告诉我如何解决它吗

  5. 提供我的代码

  6. HTML

    <!DOCTYPE html>
    <html ng-app="gemStore">
      <head>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
      </head>
      <body ng-controller="StoreController as store">
        <div class="product row">
          <h3>
            {{store.product.name}}
            <em class="pull-right"></em>
          </h3>
        </div>
      </body>
    </html>
    

    JS

    (function(){
      var gem = { name: 'Azurite', price: 2.95 };
      var app = angular.module('gemStore', []);
      app.controller('StoreController',function(){
        this.product = gem;
      });
    })();
    

1 个答案:

答案 0 :(得分:0)

您应该使用$scope

app.controller('StoreController',function($scope){
    $scope.product = gem;
});

{{product.name}}

请尝试以下代码段。

&#13;
&#13;
(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []);
  app.controller('StoreController',function($scope){
    $scope.product = gem;
  });
})();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body ng-controller="StoreController">
    <div class="product row">
      <h3>
        {{product.name}}
        <em class="pull-right"></em>
      </h3>
    </div>
  </body>
</html>
&#13;
&#13;
&#13;