Question

我有一系列不同的媒体资源：

图片
Youtoube网址
简单文字

它们使用网址/内容属性和类型属性（image / youtube / text）保存。

更新$scope.media时，我想显示正确的HTML模板。我有这个解决方案：

 <div ng-show="page.media.type == 'text'">{{$scope.media.paragraph}}</div>
 <img ng-show="page.media.type == 'image'" ng-src="{{$scope.media.url}}"/>
 <iframe ng-show="page.media.type == 'youtube'" ng-src="{{scope.media.url}}" frameborder="0" allowfullscreen></iframe>

我想将此作为每种内容类型的单独HTML模板文件。包含此内容的页面已经是主index.html中<div ng-view></div>区域的部分模板，并且媒体视图也已位于ng-switch-when开关内。

因此我不想添加嵌套 ng-view或ng-switch来包含媒体模板。是否有其他方法可以通过$ scope更改触发单独的HTML模板？

Answer 1

您应该查看ng-include，以及从服务器或页面中包含模板html的功能。

<div ng-include src="templateIdentifier"></div>

src属性可以是表达式，因此对模型src绑定的更改将动态更改模板。

所以你可以做一个像

这样的手表

$scope.$watch('$scope.media',function(media) {
    $scope.templateIdentifier='template-'+media.type;
});

如果定义内联

，这就是定义模板的方法

<script type="text/ng-template" class="template" id="template-text">
    {{$scope.media.paragraph}}
</script

显示不同类型的媒体？

1 个答案: