加載模板回調後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

你真的不應該這樣用Angular進行DOM調用：這根本不是Angular想要的工作方式。相反，你會想使一個指令：

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

這裏是更好地引進的一個自定義指令：http://www.ng-newsletter.com/posts/directives.html#.Ut51i_Yo5AY

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

那麼您可以在模板中使用它