以角度在嵌套视图中加载json数据？答案

【问题标题】：Loading json data in nested views in angular?以角度在嵌套视图中加载json数据？
【发布时间】：2015-01-01 15:54:13
【问题描述】：

我是 Angular 新手，正在尝试找出嵌套视图：

我有一个 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 文本，但 tab3 有 json 数据..

如何配置 tab3 控制器才能在 data3 视图中显示 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 数据？

Exp：http://plnkr.co/edit/medE55ZlFYBtWJExrxjU?p=preview

提前谢谢你！

【问题讨论】：

标签： angularjs

【解决方案1】：

在您的tab3 控制器中添加$http 依赖项，如下所示，

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

【讨论】：

您还可以使用您的“tab3”路由的 resolve 属性来返回该承诺并将生成的 JSON 对象直接注入您的控制器。请参阅$routeProvider docs 了解更多信息。