Угловой контроллер не говорит, чтобы посмотреть

index.html не работает со встроенным кодом 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 =

Я не уверен, как проверить, является ли это привязка или приложение не инициализировано должным образом, или оба.

Может кто-нибудь определить, что не так или нет, пожалуйста?

Источник

3 ответа

Решение

Вот демо 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>

Надеюсь, это поможет вам

Источник

Вот решение скрипки

массив товаров не закрыт:

$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>
Источник

Вам нужно пройти первую линию $scope как строка в массиве, и вам нужна запятая, например: app.controller('MainController',['$scope', function($scope){

Источник
Другие вопросы по тегам