Metro Carousel, Angular ng-repeat dan REST data Tips n Trick

Carousel merupakan salah satu komponen yang disediakan untuk membuat slider image. Beberapa saat yang lalu saya menggunakan fitur carousel dari Metro UI untuk membuat sebuah slideshow artikel dengan menggunakan ng-repeat angular sebagai data yang akan di gunakan sedangkan data akan di dapat dengan mengambil dari backend menggunakan REST.

Berikut adalah harapan flow data yang akan terjadi : 

Flow Harapan

Pada awalnya Saya berpikir system akan memiliki data flow seperti gambar di atas. Pada awal halaman di buka, controller akan langsung melakukan call data pada backend. Yang kemudian setelah data di dapat dari backend, angular mengesetnya pada variable scope dan dengan kemampuan 2-way-data-binding angular akan membuat data image tersedia untuk di gunakan sebagai image yang akan ditampilkan

Sayangnya hal tersebut tidak terjadi seperti harapan. Berikut hal yang terjadi pada sistem : 

Flow Kenyataan

Pada kenyataannya system pada saat controller masih belum mendapatkan data dari backend, carousel sudah mengambil data dan menjalankan fungsinya sebagai image slider, dan dikarenakan pada awal tidak ada kumpulan image yang ada, hal tersebut membuat carousel hanya menyediakan 1 slot image untuk di masukkan kedalam slider. Sehingga ketika data sudah di dapat sekalipun, hanya image pertama yang ditampilkan dan tidak ada efek slider.

Kemudian setelah mengetahui cara kerja carousel maka yang harus dilakukan adalah membuat carousel di diinit setelah mendapatkan data dari REST.

How?
Karena controller yang tahu kapan data datang dan dapat mentrigger untuk menginit carousel, maka terpikir cara untuk membinding html carousel pada saat data datang menggunakan ng-bind-html.

Flow solusi : 

Flow Solusi

Menggunakan cara tersebut, Carousel muncul pada html setelah data lengkap dan memulai fungsinya sendiri(urusan Metro) dengan data image yang lengkap. Sehingga carousel dapat berjalan dengan benar. 

Happy end? Yes!!

Carousel dapat berjalan semestinya dengan tetap mendapat data dari backend. Tetapi itu adalah satu dari seribu jalan menuju roma yang berhasil saya dan team temukan, Saya rasa tentunya masih ada cara lain untuk mensolving masalah ini.  :D

Berikut adalah potongan code apa yang digunakan untuk memperjelas maksud membinding html :

HTML :

<div ng-bind-html="htmlCarouselArticle"> </div>

Angular Controller : 

var renderCarousel = function (listObject) {

    var contentHtml = '';
    angular.forEach(listObject, function (object) {

        var body = "<div class='slide' > 
             <div style='background-size: cover; 
             background-position: center center; 
              background-image: url("+
            object.urlPic            +"); width: 100%; height: 100%;' > </div> </div>";
        contentHtml = contentHtml + body;    });
    var header = "<div class='carousel' data-role='carousel' data-effect='slide' 
    data-controls='false' data-markers='false' >";
    var footer = "</div>";
    contentHtml = header + contentHtml + footer;
    $scope.htmlCarouselArticle = $sce.trustAsHtml(contentHtml);};

Pada html Saya menggunaka ng-bind-html untuk membind sebuah scope pada html. Pada controller saya memanggil function renderCarousel setelah API mendapatkan kembalian data. Function renderCarousel akan melooping data dari api dan mengconstruct html yang dibutuhkan untuk carousel.

Solusi ini tentunya tidak hanya dapat digunakan untuk masalah carousel pada Metro ui, tetapi dapat digunakan di banyak hal yang membutuhkan trigger setelah suatu event. 

Semoga solusi ini dapat membantu, sampai berjumpa kembali lain waktu
Happy Coding~ :D