Javascript 角度控制器不与视图对话_Javascript_Html_Angularjs_Ng Controller

Javascript 角度控制器不与视图对话

javascript html angularjs

Javascript 角度控制器不与视图对话,javascript,html,angularjs,ng-controller,Javascript,Html,Angularjs,Ng Controller,index.html无法处理嵌入的代码。链接标记看起来像在工作（页面已格式化）-我将脚本标记移到顶部，但视图仍然显示角度表达式语法，而不是值 {{products.price | currency}}而不是$18.99 主控制器如下所示： app.controller('MainController',[$scope function($scope){ // var vm = this; $scope.title = 'Bonisecrest';

index.html

无法处理嵌入的代码。链接标记看起来像在工作（页面已格式化）-我将脚本标记移到顶部，但视图仍然显示角度表达式语法，而不是值

{{products.price | currency}}而不是$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>

我不知道如何检查是绑定还是应用程序没有正确初始化，或者两者都有

有人能找出哪里出了问题或遗漏了什么吗？

您需要第一行在数组中以字符串形式传递

$scope

，并且需要一个逗号，如下所示：

app.controller（'MainController'，['$scope'，function（$scope）{

这是解决方案

产品阵列未关闭：

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


{{product.name}}
{{product.price | currency}}
{{product.info}}

这是演示您必须按如下方式更新代码

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


{{product.name}}
{{product.price | currency}}
{{product.info}}

希望这可以帮助您

控制台中是否有任何错误？？？将第一行中的部分更正为

['$scope'，function（$scope）{

成功了！没有加载JS文件。控制台正在记录：由于文件夹路径前面的“/”，找不到错误文件。修复路径：''谢谢。我对scope变量进行了更改，products数组已正确关闭，我只是在问题中没有粘贴整个数组，所以可能是意外去掉了最后一个括号和分号。另外，修复了html以反映您发现的内容-我可以看到它在JSFIDLE中运行良好，但在Chrome或Firefox中仍然无法运行。我尝试了另一个CDN链接以进行角度思考，可能这就是问题所在，但仍然没有成功。JS文件也没有加载。控制台记录：ERR_FILE_not_FOUND，因为文件夹路径前面的“/”。固定路径：“”谢谢！

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

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.."
           }];
   }]);

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