IONIC/ANGULARJS Dynamic html based on properties / data

Question

我是ionic v1的新手，目标是我正在根据json数据提供的数据创建一个动态html页面，但问题是ng-reapeat在使用ng-bind-html时没有渲染图像。

关于如何解决问题的任何建议？总体目标是我需要创建一个带有类别部分的页面（基于提供的数据，因此它可以是多个）和内部可滚动的横幅图像。

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>

Answer 1

默认情况下，

ng-bind-html 不编译提供的 html，因此 tou 需要手动执行此操作，例如使用指令。

var app = angular.module('app', ['ionic'])
.directive('dynamicImg', function($compile) {
    return {
      restrict: 'A',
      replace: true,
      link: function(scope, element, attrs) {
        scope.$watch(attrs.dynamicImg, function(html) {
          element[0].innerHTML = html;
          $compile(element.contents())(scope);
        });
      }
    }
  })
  .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('MediaCtrl', function($state, $scope, $ionicModal, 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());
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<ion-pane ng-app="app" ng-controller="MediaCtrl">
  <ion-content>
    <div dynamic-img="vdeoHTML"></div>
  </ion-content>
</ion-pane>