AngularJS - 無法初始化jQuery滑塊服務後獲取帶滑動條的JSON對象Markup

我試圖將Slick Slider Carousel初始化爲我的AngularJS App。AngularJS - 無法初始化jQuery滑塊服務後獲取帶滑動條的JSON對象Markup

我在一定程度上使用了我創建的名爲slickSlider（代碼如下）的指令。問題是隻有當我將滑塊的標記直接添加到html模板時纔有效，而不是如果我從使用promises/deferred的外部服務獲取標記以僅在需要時才獲取數據。

當我在chrome sources面板上放置斷點時，我看到slickSlider指令代碼在Controller從服務獲取數據之前運行，所以指令代碼沒有任何作用。

我在下面的snippit中的應用程序的縮小版本中複製了該問題。

我怎樣才能得到指令初始化滑塊服務已經得到了控制數據，並已經通過到視圖後？
我應該嘗試用另一種方式初始化滑塊嗎？

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... &nbsp; <i>{{postsCtrl.test}}</i> <br /> 
 
    \t Service is working... &nbsp; <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 
     }); 
     }); 
    } 
    } 
});

來源

2016-12-17 Holly

您需要在postsCtrl.slider值更改後重新編譯元素。

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('slickSliderContent', function($compile) { 
 
    return { 
 
    restrict: 'A', 
 
    replace: true, 
 
    link: function(scope, elem, attrs) { 
 
     scope.$watch(attrs.slickSliderContent, function(html) { 
 
      elem[0].innerHTML = html; 
 
      $compile(elem.contents())(scope); 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
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"> 
 

 
    <div class="slick-slider" slick-slider-content="postsCtrl.slider"></div> 
 
</body>

來源

2016-12-17 16:42:55 whyyie

感謝它的工作原理。 '$ compile'函數做了什麼？這是什麼線'elem [0] .innerHTML = html;' – Holly

我在http://stackoverflow.com/q/41278998/1814446上的ajax響應中的社交媒體窗口小部件有類似的問題。任何想法是什麼可能造成的？ – Holly

AngularJS - 無法初始化jQuery滑塊服務後獲取帶滑動條的JSON對象Markup

回答

相關問題