$ scope在Angular js中不起作用

如果我使用「this」方法暴露變量，代碼就可以正常工作。但是，在代碼中包含範圍之後。該頁面僅顯示超出控制器範圍的元素。

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>Ristorante Con Fusion: Menu</title> 
     <!-- Bootstrap --> 
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="myctrl"> 
      <div class="col-xs-12"> 
       <div class="tab-content"> 
      <ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" ng-class="{active: isSelected(1)}"> 
        <a href="" ng-click="select(1)" 
        aria-controls="all menu" 
        role="tab">The Menu</a></li> 
        <li role="presentation" ng-class="{active: isSelected(2)}"> 
        <a href="" ng-click="select(2)" 
        aria-controls="appetizers" 
        role="tab">Appetizers</a></li> 
        <li role="presentation" ng-class="{active: isSelected(3)}"> 
        <a href="" ng-click=" select(3)" 
        aria-controls="mains" 
        role="tab">Mains</a></li> 
        <li role="presentation" ng-class="{active: isSelected(4)}"> 
        <a href="" ng-click=" select(4)" 
        aria-controls="desserts" 
        role="tab">Desserts</a></li> 
       </ul> 
       </div> 
      <ul> 
      <li class="media" ng-repeat="dish in dishes|filter:filtText"> 
        <div class="media-left media-middle"> 
         <a href="#"> 
         <img class="media-object img-thumbnail" 
         ng-src={{dish.image}} alt="Uthappizza"> 
         </a> 
        </div> 
        <div class="media-body"> 
         <h2 class="media-heading">{{dish.name}} 
         <span class="label label-danger">{{dish.label}}</span> 
         <span class="badge">{{dish.price | currency}}</span></h2> 
          <p>{{dish.description}}</p> 
         <p>Comment: {{dish.comment}}</p> 
         </div> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </div> 

<script src="bower_components/angular/angular.min.js"></script> 
<script src="scripts/app.js"></script> 
<script src="scripts/controller.js"></script> 
</body> 

</html>

App.js：

var app=angular.module("myApp",[]);

Controller.js：

app.controller("myctrl",['$scope',function($scope) 
     {  $scope.dishes=[ 
         { 
          name:'Uthapizza', 
          image: 'images/uthapizza.png', 
          category: 'mains', 
          label:'Hot', 
          price:'4.99', 
          description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
          comment: '' 
         }, 
         { 
          name:'Zucchipakoda', 
          image: 'images/zucchipakoda.png', 
          category: 'appetizer', 
          label:'', 
          price:'1.99', 
          description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', 
          comment: '' 
         }, 
         { 
          name:'Vadonut', 
          image: 'images/vadonut.png', 
          category: 'appetizer', 
          label:'New', 
          price:'1.99', 
          description:'A quintessential ConFusion experience, is it a vada or is it a donut?', 
          comment: '' 
         }, 
         { 
          name:'ElaiCheese Cake', 
          image: 'images/elaicheesecake.png', 
          category: 'dessert', 
          label:'', 
          price:'2.99', 
          description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', 
          comment: '' 
         } 
         ]; 
         $scope.filtText = ''; 
          $scope.tab = 1; 
      $scope.dishes = dishes; 
      $scope.select = function(setTab) { 
       $scope.tab = setTab; 

       if (setTab === 2) 
        $scope.filtText = "appetizer"; 
       else if (setTab === 3) 
        $scope.filtText = "mains"; 
       else if (setTab === 4) 
        $scope.filtText = "dessert"; 
       else 
        $scope.filtText = ""; 
      } 
      $scope.isSelected = function (checkTab) { 
       return ($scope.tab === checkTab); 
      } 

      }])

來源

2016-08-14 Zain

你正在覆蓋'$ scope.dishes =盤;' –

其實我只是想出了它，我正在重新定義在controller.js中盤變量。 $ scope.dishes =盤; 刪除它，它現在工作正常。無論如何感謝:) – Zain

您正在覆寫/在該行重新定義變量：

$scope.dishes = dishes;

來源

2016-08-14 22:36:44

刪除以下一行代碼

$scope.dishes = dishes;

什麼，你在這裏做的是設置的$scope.dishes等於變量dishes的價值的價值，但dishes未初始化或任何地方的，所以您有可能覆蓋你與價值創造的菜餚陣列未定義。

來源

2016-08-14 22:36:55 rdgd

$ scope在Angular js中不起作用

回答

相關問題