Укажите директиву на использование другого шаблона на основе переменной области

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 это изображение URL, который http://example.com/image.jpg, результат будет <img src="http://example.com/image.jpg" />

Но когда link это видео url, результатом будет <video width="320" height="240" controls><source src="http://example.com/video.mp4" type="video/mp4"></video>

Я стараюсь использовать функцию compile в di rective, но я не могу получить значение 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); 
     } 

     } 
    } 

    }; 

});