2016-05-14 94 views
1

即时通讯尝试从json文件中获取数据,但我不工作,我已经检查了每个选项,但没有人为我工作,没有代码工作,我不知道如果我必须导入一些东西否则,和JSON文件的索引文件的同一水平,希望你能帮助我AngularJs 1不工作

appClients.js

(function(){ 
    var app = angular.module('customer',[]); 
    alert('Success'); 
    app.controller("CustomerController",function($scope,$http){ 
     $http.get('../customer.json') 
     .success(function(data) { 
      // $scope.phones = data; 
      alert('Success'); 
     }) 
     .error(function(data){ 
      alert('Error'); 
     }); 
    }); 
}); 

的index.html

<!DOCTYPE HTML> 
<html ng-app="customer"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
    </head> 
    <body class="Master" ng-controller="CustomerController as customer"> 
     <script type="text/javascript" src="js/angularjs.min.js"></script> 
     <script type="text/javascript" src="js/appClients.js"></script> 
     <header id="MasterHeader"> 

     </header> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="col-lg-6" id="CustomerList" ng-repeat="product in customer.clients"> 
         <h3>{{product.id}}</h3> 
        </div> 
        <div class="col-lg-6" id="CustomerDetails">Details</div> 
       </div> 
      </div> 
     </div> 

     <footer id="MasterFooter"> 

     </footer> 

    </body> 
</html> 
+0

为什么使用jQuery? –

+0

看看你的开发工具。你在控制台中是否有任何错误?这个ajax调用实际上是否返回任何内容,或者你得到一个404? – Pevara

+0

已经检查开发工具,但没有找到解决方案 –

回答

4

它看起来像你的IIFE (立即直接调用函数表达式)没有被执行。更新您的appClient.js文件到

(function(){ 
    var app = angular.module('customer',[]); 
    alert('Success'); 
    app.controller("CustomerController",function($scope,$http){ 
     $http.get('../customer.json') 
     .success(function(data) { 
      // $scope.phones = data; 
      alert('Success'); 
     }) 
     .error(function(data){ 
      alert('Error'); 
     }); 
    }); 
})(); 

注意额外()上最后一行。这应该允许您看到最初的“成功”警报。

如果您的ajax调用成功,您需要制作$scope属性,结果设置为与HTML中引用的$scope属性保持一致。根据当前片段,您似乎将控制器中的结果设置为$scope.phone,但在HTML中参考$scope.customer

+0

现在角码的工作,非常感谢,但ajax调用返回错误,它可能是什么? –

+0

你的错误信息是什么?你应该能够在开发工具中调试(通常是F12)或者使用'console.log(data)'将错误记录到控制台。如果这是一个单独的问题,那么创建一个单独的问题可能是有益的。 – detaylor