Angular 控制器不与视图对话

Question

index.html 无法使用嵌入的 Angular 代码。 link 标签看起来正常（页面已格式化）-我将脚本标签移到了顶部，但视图仍然显示 Angular 表达式语法而不是值
{{ products.price | currency }} instead of .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 =

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

有人可以找出错误或遗漏的地方吗？

Answer 1

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

Answer 2

这是解决方案fiddle

产品数组未关闭：

$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>

Answer 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>

希望对您有所帮助

Angular 控制器不与视图对话

Angular controller not talking to view

html

javascript

angularjs

ng-controller