IONIC/ANGULARJS 基于属性/数据的动态html答案

【问题标题】：IONIC/ANGULARJS Dynamic html based on properties / dataIONIC/ANGULARJS 基于属性/数据的动态html
【发布时间】：2017-06-16 14:26:59
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript jquery html angularjs ionic-framework

【解决方案1】：

默认ng-bind-html不要compile提供的html，所以你需要手动做，例如使用指令。

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>

【讨论】：