$http 让我很难在 json 文件中显示数据答案

【问题标题】：$http giving me a hard time displaying the data in a json file$http 让我很难在 json 文件中显示数据
【发布时间】：2016-11-06 20:33:56
【问题描述】：

在我将它移到它自己的数据文件夹并开始使用 $http 之前，我在 app.js 文件中的控制器内有 json，这很好，但是一旦我将数据外部化，它就会停止工作而没有错误。

我的root如下

-website
    -data
        --slides.json
    -images
        --slide1.jpg
        --slide2.jpg
        --slide3.jpg
    -js
        --app.js
    -views
        --partials
             ---home.html
    -index.html

主页是包含滑块的视图，通过<ui-view>注入index.html

这是主视图文件

<div class="clearfix" ng-controller="sliderController">
    <div class="rev_slider_wrapper">
        <div id="rev_slider" class="rev_slider">
            <ul>
                <li ng-repeat="slide in slides">
                    <img ng-src="/images{{slide.img}}"/>
                    <div class="tp-caption WebProduct-Title tp-title">
                        {{slide.title}}
                        <a class="tp-caption tp-button" ng-href='{{slide.linkto}}'> Click me </a>
                    </div>
                </li>
            </ul>
       </div>
   </div>
</div>

这是我的 app.js 和控制器

var app = angular.module('Cribs', ['ui.bootstrap', 'ui.router']);

    app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
        // Application routes
        $stateProvider
            .state('index', {
                url: '/',
                templateUrl: 'views/partials/home.html'
            })
            .state('listings', {
                url: '/listings',
                templateUrl: 'views/partials/listings-list.html'
            });

        // For unmatched routes
        $urlRouterProvider.otherwise('/');

        $locationProvider.html5Mode(true);

    }]);

    app.run(function($rootScope) {
        $rootScope.$on("$stateChangeError", console.log.bind(console));
    });

    app.controller('sliderController', ['$scope', '$http', function($scope, $http) {
        $http.get('/data/slides.json').success(function(data){
            $scope.slides = data;
        });
    }]);

还有json数据

[
  {
    "title": "Slide 1 Title",
    "linkto": "/listings",
    "img":"/slide1.jpg"
  },
  {
    "title": "Slide 2 Title",
    "linkto": "/contact",
    "img":"/slide2.jpg"
  },
  {
    "title": "Slide 3 Title",
    "linkto": "/about",
    "img":"/slide3.jpg"
  }
]

我已经访问了所有可以想象的教程，这里提出的每个问题，但我仍然无法弄清楚问题所在。 谁能告诉我这里发生了什么？为什么幻灯片不显示？这可能是 Jade/Pug 与 Angular 不一致吗？这不可能是 css 问题，因为如果我将 json 数据移回控制器，它可以正常工作。

如您所见，控制台也没有抛出任何错误。

而且来源也不是 404ing。它们加载到 DOM 中

*编辑我应该注意，为了证明我确实可以访问数据，我在页面底部写了 <pre>{{slides}}</pre> 并且我能够在屏幕上看到我的 json

【问题讨论】：

显示jade生成的HTML文件
试试$scope.slides = data.data;
@JBNizet 生成的 HTML 被最小化并与其他视图一起编译到一个大的 html 文件中。显示 HTML 真的有必要吗？
好吧，我发现玉的语法完全不可读，甚至你想知道它是否可能是玉的问题。查看实际的 HTML 模板会有所帮助。
好的。这部分我会重写

标签： angularjs json pug

【解决方案1】：

我唯一可以建议的是包装，您可以在 $timeout 中使用 json 数据设置范围变量，因为它可能会在视图周期完成之后/之前加载数据。

$timeout(function() {
    $scope.slides = data;
});

【讨论】：