Question

我想创建一个名为tagFor的指令，它根据通过属性传递的数据生成适当的指令。例如。

<tag-for source="{{link}} ng-repeat="link in links"></tag-for>

将links定义为包含2个元素的数组，http://example.com/image.jpg和http://example.com/video.mp4

当link是图片网址时，http://example.com/image.jpg，结果为<img src="http://example.com/image.jpg" />

但如果link是视频网址，则结果为<video width="320" height="240" controls><source src="http://example.com/video.mp4" type="video/mp4"></video>

我尝试在指令中使用compile函数但是我无法获得link的值来告诉指令返回适当的模板。

请帮忙。

Answer 1

你可以在链接功能中做到这一点，你要做的就是编译视频或img模板并附加它们

这里是Plunker

app.directive('tagFor', function($compile, $timeout) {

  var video = '<iframe width="340" height="280" frameborder="0" allowfullscreen></iframe>';
  var image = '<div><img ng-src="{{link.url}}" width="340" height="280"/></div>';

  return {
    restrict: 'EA',
    scope: {
      link: '=ngModel'
    },
    template: '<div>{{link.type}}</div>',
    transclude: true,

    compile: function(tElem, tAttr) {
      //this is just the link func
      return function(scope, el, attr, ctrl, trans) {
        if (scope.link.type == 'video') {
          var vid = $compile(video)(scope);
          el.append(vid);    
        } else if (scope.link.type == 'image') {
          var img = $compile(image)(scope);
          el.append(img);
        }

      }
    }

  };

});

告诉指令使用基于范围变量的不同模板

1 个答案: