2015-07-11 108 views
0

我有下面的代碼,它假設在'SimpleController'中顯示所有產品。但它不起作用,它不顯示產品。AngularJS控制器不顯示

<div data-ng-controller="SimpleController"> 

    <ul> 
     <li data-ng-repeat="product in products"> 
      {{product.productname}} 
     </li> 
    </ul> 
</div> 

<script src="angular.min.js"></script> 

<script> 
    function SimpleController($scope) 
    { 
     $scope.products = [ 
      {productname:'ariel',price:'7.50'}, 
      {productname:'tinahpa',price:'12.00'}, 
      {productname:'breadbreast',price:'2.00'} 
     ]; 
    } 
</script> 

+0

角度不再支持作爲控制器的全局功能。根據文檔 – charlietfl

+0

使用正確的模塊聲明,您需要將控制器連接到應用程序。新版本不支持這一點。 – Pravin

回答

1

它正常工作,我想你忘記了設置NG-應用。試試這個...

DEMO

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 


    <!-- You need to give the ng-app directive the name of your app --> 
    <!-- You could also put it in the opening HTML tag --> 

    <body ng-app="foo"> 
    <div data-ng-controller="SimpleController"> 

     <ul> 
      <li data-ng-repeat="product in products"> 
       {{product.productname}} 
      </li> 
     </ul> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 


    <script> 

     var app = angular.module('foo', []); 

     app.controller('SimpleController', SimpleController); 

     function SimpleController($scope) 
     { 
      $scope.products = [ 
       {productname:'ariel',price:'7.50'}, 
       {productname:'tinahpa',price:'12.00'}, 
       {productname:'breadbreast',price:'2.00'} 
      ]; 
     } 
    </script> 
    </body> 

</html> 
+0

謝謝,它現在有效。 –

0

你似乎並不具有應用程序模塊(NG-APP)宣佈在視圖的任何地方。

您還需要將您的控制器傳遞給angular.module()的控制器函數。