0

我想执行一个轮播插件，但我找不到正确的回调（“加载所有模板内容后”）。基本上我有一个模板，它有很多循环抛出 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.');
  });              
}]);
4

1 回答 1

0

你真的不应该用 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

于 2014-01-21T13:27:23.677 回答