Обратный вызов шаблона после загрузки AngularJS

Question

Я хочу выполнить карусельный плагин, но я не могу найти правильный обратный вызов («После загрузки всего содержимого шаблона»). В основном у меня есть шаблон, в котором есть много объектов json.

Blog.config(['$routeProvider', function($routeProvider, $locationProvider) {  
     return $routeProvider.otherwise({ 
      templateUrl: '../assets/angularlayouttoload.html', 
      controller: 'blogControllers' 
     }); 

     $locationProvider.html5Mode(true); 
    }]); 

Это мой контроллер, получающий данные json.

blogControllers.controller('blogControllers', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams) { 
    $scope.data = {carrossel: [], banner: []}; 

    $http.get('public/index.json').success(function(data) { 
    console.log(data); 
    $scope.data.carrossel = data[0]; 
    $scope.data.banner = data[1]; 

    // After Load all template execute this above 
    $('.bxslider_new_one').bxSlider({auto: true, speed: 1000, pause: 10000, pagerCustom: $("div#pager_for_slider_new_one")}); 

    }).error(function() { 
    console.error('Failed to load posts.'); 
    });    
}]); 

Answer 1

Вы действительно не должны делать DOM вызовов, как это с Угловым: Это просто не так, как Угловым предполагают, чтобы работать. Вместо этого, вы хотели бы сделать директиву:

.directive('bxSlider', [function() { 
    return { 
    link: function($scope, $element, $attrs) { 
     $element.bxSlider({ 
     auto: true, 
     speed: 1000, 
     pause: 10000, p 
     pagerCustom: $element.find('.pager'); 
    } 
    }; 
}]); 

Затем вы можете использовать его в шаблоне:

<div bx:slider> 
    <a class="pager">foo</a> 
    </div> 

Вот один из лучших введений пользовательских директив: http://www.ng-newsletter.com/posts/directives.html#.Ut51i_Yo5AY