0
Slick Slider Carouselを初期化しようとしています。AngularJS AppAngularJS - サービス後にjQueryスライダを初期化できません。スライダ付きのJSONオブジェクトを取得します。マークアップ
slickSlider（下のコード）というディレクティブを作成してある程度機能しました。この問題は、スライダのマークアップをhtmlテンプレートに直接追加した場合にのみ機能し、必要なときにデータを取得するために約束/遅延を使用する外部サービスからマークアップを取得していない場合にのみ問題になります。
クロムソースパネルにブレークポイントを配置すると、コントローラーがサービスからデータを取得する前にslickSliderディレクティブコードが実行されていることがわかります。そのため、ディレクティブコードは効果がありません。
以下のスニペットで私のアプリの縮小版で問題を再現しました。
- どのように私は サービスは、コントローラのデータを得ているし、それがビューに を渡された後、スライダーを初期化するための指示を得ることができますか？
- スライダを別の方法で初期化する必要がありますか？
var app = angular.module('app', ['ngSanitize']);
app.controller('postsController', ['postsService', function (postsService) {
var postsCtrl = this;
postsCtrl.test = 'this is an expression from the controller'
var promise = postsService.getPost(1);
promise.then(function (data)
{
postsCtrl.data = data.data;
// I can't access the API on SO so am replicating what I would get from it here.
postsCtrl.slider = '<div class=\"slick-slider\">\n \n <div>Service Slide 1<\/div>\n \n <div>Service Slide 2<\/div>\n \n <div>Service Slide 3<\/div>\n \n <\/div>';
});
}]);
app.service("postsService", function ($http, $q) {
function getPost(postsId) {
var deferred = $q.defer()
var url = 'https://jsonplaceholder.typicode.com/albums/' + postsId;
$http({
method: 'GET', // GET OPTIONS
cache: true,
url: url,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).
then(function(response) {
//your code when success
deferred.resolve(response);
}, function(response) {
//your code when fails
deferred.reject(response);
});
return deferred.promise;
}
this.getPost = getPost;
});
app.directive('slickSlider',function(){
return {
restrict: 'C',
link: function(scope, elem, attrs) {
$(elem).slick({
// settings
});
}
}
});body {
font-family: sans-serif;
font-size: 14px;
}
h1 {
font-size: 15px;
margin: 20px 0 2px;
}<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<body ng-app="app" ng-controller="postsController as postsCtrl">
\t Controller is working... <i>{{postsCtrl.test}}</i> <br />
\t Service is working... <i>{{postsCtrl.data.title}}</i>
\t <h1>Slider Carousel markup from simple HTML</h1>
\t <div class="slick-slider">
\t \t <div>HTML Slide 1</div>
\t \t <div>HTML Slide 2</div>
\t \t <div>HTML Slide 3</div>
\t </div>
\t <h1>Slider Carousel markup from expression supplied by Service</h1>
<div ng-bind-html="postsCtrl.slider"></div>
</body>UPDATE
私は私の指示で$timeoutを使用してみましたが、それはうまくいきませんでした！
app.directive('slickSlider',function($timeout){
return {
restrict: 'C',
link: function(scope, elem, attrs) {
$timeout(function() {
$(elem).slick({
// settings
});
});
}
}
});
感謝。 '$ compile'関数は何をしますか？ – Holly
私は、http://stackoverflow.com/q/41278998/1814446にあるajaxレスポンスのソーシャルメディアウィジェットで同様の問題を抱えています。これは、「elem [0] .innerHTML = html;それを引き起こしている可能性のあるものは何ですか？ – Holly