与Angularjs混合使用HTML标签

Question

我在玩angularjs，遇到了数据绑定和HTML 5的琐碎问题。

假设我有一个表示图像和视频文件混合的数组：

  .controller('Foo', ['$scope', function($scope) {
  $scope.photos = [
    {
        Url: "img/2011-04-30\ 16.51.38.jpg",
    },
    {
        Url: "img/2011-04-30\ 16.51.53.jpg",
    },
    {
        Url: "img/2011-04-30\ 17.35.58.jpg",
    },
    {
        Url: "img/video-2011-04-30-16-52-23.mp4",
    },
    {
        Url: "img/video-2011-04-30-18-01-42.mp4",
    },
    {
        Url: "img/2011-04-30\ 16.51.47.jpg",
    },
    {
        Url: "img/2011-04-30\ 16.52.40.jpg",
    },
    {
        Url: "img/2011-04-30\ 18.02.26.jpg",
    },
    {
        Url: "img/video-2011-04-30-17-36-02.mp4",
    },
]}]);

我想将此网址数组转换为混合媒体幻灯片，所以我试图在该数组上建立ng-repeat循环并将数据绑定到<img>和<video>标签。

显然，这不会产生我想要的东西，但这是我的示例hg-repeat循环：

<div  ng-controller="Foo" ng-repeat = "photo in photos">
    <img ng-src="{{ photo.Url }}" class="photos" width="200" height="200" />
    <video src="{{ photo.Url }}" class="video" controls/>

循环中的每个迭代我都想要一个OR或一个都不想要。 一种选择是在控制器中创建一个html标签数组，并使用该数组作为ng-repeat的源，但这模糊了视图和控制器之间的界限，这是不合适的。

有没有办法在Angularjs中本地处理此问题？

Answer 1

一种不好的处理方式是检查URL以查看扩展名。

<div  ng-controller="Foo" ng-repeat = "photo in photos" ng-init="isVideo=photo.Url.indexOf('.mpg') == photo.Url.length-4">
    <img ng-src="{{ photo.Url }}" class="photos" width="200" height="200" ng-if="!isVideo"/>
    <video src="{{ photo.Url }}" class="video" controls ng-if="isVideo" />

如果您需要检查更多扩展名（例如：png，mp3等），则此类型将变得更加难看。

因此，您也可以将逻辑移至控制器中的某个功能，但这仍然不是一个好方法。 而是让您的模型完成适当的数据表示工作。 根据mime类型向模型添加属性。

   $scope.photos = [{ //photos is probably not a good name for storing list of mixed medias
        Url: "img/2011-04-30\ 16.51.38.jpg",
        Type: 'image' //<-- add a property that exactly represents what type it is or just add a flag 
        isVideo: false
    },{
        Url: "img/2011-04-30\ 16.51.53.jpg",
        Type: 'video', 
        isVideo: true //<-- Derive this value based on some logic
    },

并将其应用于您的视图。

更好的方法是让指令根据类型返回特定的模板。

Answer 2

选项三：编写一条指令，该指令仅显示基于URL扩展名的正确标记。

例如：

<div ng-controller="SlideController">
  <div ng-repeat="slide in data">
    <media-slide url="slide.Url"></media-slide>
  </div>
</div>

和js：

app.directive('mediaSlide', [function() {
  return {
    restrict: 'E',
    scope: {
      url: '='
    },
    link: function(scope, element, attrs, controllers) {
      var updateTag = function() {
        var parser = document.createElement('a');
        parser.href = scope.url;
        var parts = parser.pathname.split('.');
        if (parts.length<=1) {
          scope.extension = "";
          return;
        }
        scope.extension = parts[parts.length-1];
      }
      scope.$watch('url', updateTag);
      updateTag();
    },
    template: '<img ng-if="extension == \'jpg\'" ng-src="{{url}}" height="200" width="200"/>' +
              '<video ng-if="extension == \'mp4\'" src="{{url}}" height="200" width="200" controls/>' +
              '<span ng-if="extension == \'\'">{{url}}</span>'
  }
}]);

在plnkr上查看

每当您觉得需要在视图中引入太多的逻辑时，就可以使用指令。

如果您想弄清楚如何根据数据选择视图中的特定标签，则大多数情况下，最好使用ng-show/ng-hide或ng-if条件格式设置。

Answer 3

惰性模式：

<div  ng-controller="Foo" ng-repeat = "photo in photos">
  <img ng-src="{{ photo.Url }}" ng-show="{{photo.Url.indexOf('jpg') > -1}}" class="photos" width="200" height="200" />
  <video src="{{ photo.Url }}" ng-show="{{photo.Url.indexOf('mp4') > -1}}" class="video" controls/>
<div>

要么

<div  ng-controller="Foo" ng-repeat = "photo in photos">
  <img ng-src="{{ photo.Url }}" ng-if="!{{photo.Url.indexOf('jpg') > -1}}" class="photos" width="200" height="200" />
  <video src="{{ photo.Url }}" ng-if="!{{photo.Url.indexOf('mp4') > -1}}" class="video" controls/>
<div>