2014-11-05 56 views
0

我是新来的Angular,并试图找出嵌套的意见:在角度的嵌套视图中加载json数据?

我有一个json文件,我想要显示,但在嵌套视图之一;我没有得到任何结果:

应用:

VAR对myApp = angular.module( '对myApp',[]);

myApp.config(['$routeProvider', 

    function($routeProvider){ 

     $routeProvider. 
      when('/tab1', { 
       templateUrl: 'tab1.html', 
       controller: 'tab1' 
      }). 
      when('/tab2',{ 
       templateUrl: 'tab2.html', 
       controller: 'tab2' 
      }). 
      when('/tab3',{ 
       templateUrl: 'tab3.html', 
       controller: 'tab3' 
      }). 
      otherwise({ 
       redirectTo: '/tab1' 
      }); 
    }]); 

myApp.controller('tab1', function($scope, $http){ 
    $scope.message = 'This is Tab1 space'; 
}); 

myApp.controller('tab2', function($scope){ 
    $scope.message = 'This is Tab2 space'; 
}); 

myApp.controller('tab3', function($scope){ 

    $http.get('data.json') 
     .success(function(data){ 
      $scope.cars = data;     
     }); 
}); 

我可以显示TAB1和TAB2文本,但它有JSON数据TAB3 ..

我怎么有TAB3配置控制器能够显示数据3视图的JSON数据?

myApp.controller('tab3', function($scope){ 

$http.get('data.json') 
     .success(function(data){ 
      $scope.cars = data;     
     }); 
}); 

HTML:

<html lang="en" ng-app="myApp"> 
    <head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="myApp.js"></script> 
    </head> 
    <body> 
       <ul> 
        <li> 
        <a href="#tab1">tab1</a> 
        </li> 
        <li> 
        <a href="#tab2">tab2</a> 
        </li> 
        <li> 
        <a href="#tab3">Check Cars</a> 
        </li> 
       </ul> 

       <div ng-view></div> 

    </body> 
</html> 

和tab3.html

<span ng-repeat="car in cars"> 
{{car.Brand}} 
</span> 

我如何调用该TAB3 JSON数据?

经验:http://plnkr.co/edit/medE55ZlFYBtWJExrxjU?p=preview

预先感谢您!

回答

1

添加$http扶养在tab3控制器下面,

myApp.controller('tab3', function($scope,$http){ 
+0

神...日Thnx!:)) – Mar 2014-11-05 12:48:27

+1

你也可以用你的“TAB3”路线的决心属性返回这一承诺,并注入生成的JSON对象直接进入你的控制器。请参阅[$ routeProvider文档](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)以获取更多信息。 – natwallbank 2014-11-05 12:53:21