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>

カスタム ディレクティブのより良い紹介の 1 つを次に示します。

于 2014-01-21T13:27:23.677 に答える