0

index.html埋め込まれた Angular コードで動作していません。リンク タグは機能しているように見えます (ページはフォーマットされています) - スクリプト タグを一番上に移動しましたが、ビューには値ではなく Angular 式の構文が表示されたままです
{{ products.price | currency }} instead of $18.99

mainController は次のようになります。

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

ここにデモがあります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 に答える
0

$scope最初の行を配列内の文字列として渡す必要があり、次のようにコンマが必要です。app.controller('MainController',['$scope', function($scope){

于 2015-11-24T05:27:38.827 に答える
0

これがソリューションフィドルです

products 配列が閉じていません:

$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 に答える