0

index.html不适用于嵌入式 Angular 代码。链接标签看起来像是在工作（页面已格式化） - 我将脚本标签移到顶部，但视图仍然显示 Angular 表达式语法而不是值
{{ products.price | currency }} instead of $18.99

主控制器看起来像这样：

app.controller('MainController',[$scope function($scope){
    //     var vm = this;
         $scope.title   = 'Bonisecrest';
         $scope.promo   = 'Season Sale';
         $scope.products = 
             [
                {
                  name: 'AHA/BHA EXFOLIATING CLEANSER',
                  price: 18.99,
                  info:  '5 fluid ounces | 148 mL',
                  image: '\images\abaBha.jpg',
                  description: "This.."
               }
}]);

视图看起来像：

<!doctype html>
<html>
  <head lang="en">
    <meta charset="utf-8">

   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
     <!-- Modules -->
    <script src="/js/app.js"></script>
    <!-- Controllers -->
    <script src="/js/controllers/MainController.js"></script>

    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />

  </head>
  <body ng-app="myApp">
    <div class="header">
      <div class="container">
        <h2>HEADER HERE</h2>
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">

        <h1>{{ title }}</h1>
        <h2>{{ promo }}</h2>


        <div ng-repeat="product in products" class="col-md-6"> 
          <div class="thumbnail"> 
            <img ng-src="{{products.image}}"> 
            <p class="title">{{ products.name }}</p> 
            <p class="price">{{ products.price | currency }}</p> 
            <p class="info">{{ products.info }}</p> 
          </div> 
        </div>

加载的页面看起来：损坏。

我试过使用 MainController 作为主要：

 <div class="main" ng-controller="MainController as main">
      <div class="container">

        <h1>{{ main.title }}</h1>
        <h2>{{ main.promo }}</h2>

另外，尝试不使用$scope

app.controller('MainController',[function(){
         var vm = this;
         vm.title   = 'Bonisecrest';
         vm.promo   = 'Season Sale';
         vm.products =

我不确定如何检查它是绑定还是应用程序未正确初始化，或两者兼而有之。

请问有人能发现什么是错的或丢失的吗？

4

3 回答 3

0

您需要将第一行$scope作为数组中的字符串传递，并且需要逗号，如下所示：app.controller('MainController',['$scope', function($scope){

于 2015-11-24T05:27:38.827 回答
0

这是解决方案小提琴

产品数组未关闭：

$scope.products = 
         [
            {
              name: 'AHA/BHA EXFOLIATING CLEANSER',
              price: 18.99,
              info:  '5 fluid ounces | 148 mL',
              image: '\images\abaBha.jpg',
              description: "This.."
           }];

在模板解析产品而不是产品中：

 <div ng-repeat="product in products" class="col-md-6"> 
      <div class="thumbnail"> 
        <img ng-src="{{product.image}}"> 
        <p class="title">{{ product.name }}</p> 
        <p class="price">{{ product.price | currency }}</p> 
        <p class="info">{{ product.info }}</p> 
      </div> 
    </div>
于 2015-11-24T05:32:27.307 回答
0

这是演示http://jsfiddle.net/p1wvsy4w/ 您必须更新代码如下

app.controller('MainController',['$scope', function($scope){
app.controller('MainController',['$scope', function($scope){
//     var vm = this;
     $scope.title   = 'Bonisecrest';
     $scope.promo   = 'Season Sale';
     $scope.products = 
         [
            {
              name: 'AHA/BHA EXFOLIATING CLEANSER',
              price: 18.99,
              info:  '5 fluid ounces | 148 mL',
              image: '\images\abaBha.jpg',
              description: "This.."
           }];
   }]);

html

  <div ng-repeat="product in products" class="col-md-6"> 
      <div class="thumbnail"> 
        <img ng-src="{{product.image}}"> 
        <p class="title">{{ product.name }}</p> 
        <p class="price">{{ product.price | currency }}</p> 
        <p class="info">{{ product.info }}</p> 
      </div> 
    </div>

希望这可以帮助你

于 2015-11-24T05:36:00.537 回答