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

我是爱奥尼亚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>

工厂
.factory（'HTMLManager'，函数（）{
返回{
vdeoPage:函数（）{
var htmlTemplate='{CATEGORY}
'；
返回htmlTemplate；
}
}
})
控制器
.controller（'MediaCtrl'，函数（$state，$scope，$ionicModal，VideoManager，HTMLManager，$sce）{
$scope.allImages=[{
‘src’：‘img/take1.png’、‘category’：‘NEW’、‘vdeo’：‘video/test1.mp4’、‘title’：‘testtitle’、‘synosis_title’：‘Synop’、‘synosis’：‘testsynosis’、‘thumbnail’：‘img/test1.png’，
}, {
‘src’：‘img/trip1.png’、‘category’：‘LATEST’、‘vdeo’：‘video/test2.mp4’、‘title’：‘testtitle 2’、‘synopsis_title’：‘synopsis2’、‘synopsis’：‘testsynopsis2’、‘缩略图’：‘img/test2.png’，
}];
$scope.vdeoHTML=$sce.trustAsHtml（HTMLManager.vdeoPage（））；
}
HTML

默认情况下，不支持提供的html，因此您需要手动执行，例如使用指令

var-app=angular.module（'app'，['ionic']））
.directive（'dynamicImg'，函数（$compile）{
返回{
限制：“A”，
替换：正确，
链接：函数（范围、元素、属性）{
范围$watch（attrs.dynamicImg，函数（html）{
元素[0]。innerHTML=html；
$compile（element.contents（））（范围）；
});
}
}
})
.factory（'HTMLManager'，function（）{
返回{
vdeoPage:function（）{
var htmlTemplate='{CATEGORY}
'；
返回htmlTemplate；
}
}
})
.controller（'MediaCtrl'，function（$state，$scope，$ionicModal，HTMLManager，$sce）{
$scope.allImages=[{
“src”：“img/take1.png”，
“类别”：“新建”，
“vdeo”：“video/test1.mp4”，
“标题”：“测试标题”，
"大纲(标题):"大纲",，
‘大纲’：‘测试大纲’，
“缩略图”：“img/test1.png”，
}, {
“src”：“img/trip1.png”，
“类别”：“最新”，
“vdeo”：“video/test2.mp4”，
“标题”：“测试标题2”，
‘大纲(标题):‘大纲2’，
“大纲”：“测试大纲2”，
“缩略图”：“img/test2.png”，
}];
$scope.vdeoHTML=$sce.trustAsHtml（HTMLManager.vdeoPage（））；
})；