Question

我想执行一个carousel插件，但我找不到合适的回调（“加载所有模板内容后”）。基本上我有一个模板，它有很多循环抛出的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的工作方式。相反，你想做一个指令：

.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

加载模板后回调AngularJS

1 个答案: