$ http дает мне трудно отображать данные в json-файле

Question

Прежде чем я переместил его в свою собственную папку данных и начал использовать $ http, у меня был json внутри контроллера в файле app.js, и все было нормально, но как только я вытеснил данные, они перестали работать без ошибок.

Мой корень следующим образом

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

Домашняя страница вид где содержится ползунок, и он вводится в index.html через <ui-view>

Это файл домой вид

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

Я посетил каждый учебник можно себе представить, спросил здесь каждый вопрос, и я до сих пор не могу понять эту проблему. Может ли кто-нибудь сказать мне, что здесь происходит? Почему не появляются слайды? Может ли это быть несогласованностью нефрита/мопса с угловым? Это не может быть проблемой css, потому что если я переведу данные json обратно в контроллер, он отлично работает.

Как вы можете видеть, консоль также не вызывает ошибок.

И источники не 404ing либо. Они загружаются в DOM

* EDIT Я хотел бы отметить, что, чтобы доказать, что у меня есть доступ к данным, я написал в нижней части страницы <pre>{{slides}}</pre>, и я был в состоянии видеть my json на экране

Answer 1

Единственное, что я могу предложить, это обертывание, где вы задаете переменную области видимости с данными json в $ timeout, так как это может быть загрузка данных после/до завершения цикла просмотра.

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