Dynamic html based on properties / data

ionic-v1
1

Hi,

Im new to ionic v1, The goal is I’m creating a dynamic html page based on the data provided by a json data but the problem is the ng-repeat is not rendering the images upon using the ng-bind-html.

Any suggestions on how to fix the problem?. The overall goal is I need to create a page with a category section (based on the data provided so it can be multiple) and a scrollable banner images inside.

Factory

.factory('HTMLManager', function () {
  return {
    vdeoPage: function ( ) {
        var htmlTemplate='<div class=\"item item-divider vdeo-header\"><h3>{CATEGORY}</h3></div><a class=\"item item-list-detail vdeo-table\"><ion-scroll direction=\"x\"><img ng-repeat="image in allImages" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb"/></ion-scroll></a><br/>';                            
        return htmlTemplate;
    }
  }
})

Controller

.controller('MediaCtrl', function($state, $scope, $ionicModal, VideoManager, HTMLManager, $sce) {

$scope.allImages = [{
        'src' : 'img/take1.png', 'category':'NEW', 'vdeo' : 'video/test1.mp4', 'title' : 'Test Title', 'synopsis_title' : 'Synop', 'synopsis' : 'Test synopsis', 'thumbnail' : 'img/test1.png',
    }, {
        'src' : 'img/trip1.png', 'category':'LATEST','vdeo' : 'video/test2.mp4', 'title' : 'Test Title 2', 'synopsis_title' : 'Synop2', 'synopsis' : 'Test synopsis2', 'thumbnail' : 'img/test2.png',
    }];

    $scope.vdeoHTML = $sce.trustAsHtml(HTMLManager.vdeoPage());
}

HTML

    <ion-pane>
        <ion-content>
            <div ng-bind-html="vdeoHTML"></div>
        </ion-content>
    </ion-pane>
2

you have to insert ngSanitize as a dependency in app.js . for reference see the angular docs https://docs.angularjs.org/api/ng/directive/ngBindHtml

3

Hi,

The ngSanitize is already set on my app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngSanitize'])

4

it should work… can you share the code on codepen so i can debug