Question

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

我的根目录如下

-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"
  }
]

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

正如您所看到的，控制台也没有抛出任何错误。

而且来源也不是404。他们加载了DOM

*修改我应该注意，为了证明我有权访问数据，我在页面底部写了<pre>{{slides}}</pre>，我能够在屏幕上看到我的json

Answer 1

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

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

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

1 个答案: