在另一個指令的模板上使用角度指令？

Question

我正在嘗試將角度指令應用於在另一個指令的模板中創建的元素，但是如果將其作為屬性添加到模板中，則該指令將不起作用。 我有以下兩個指令：

// Event Audios
app.directive('audios', ['$sce', function($sce) {
  return {
    restrict: 'A',
    scope: { srce:'=' },
    replace: true,
    template: '<audio ng-src="{{file}}" controls></audio>',
    link: function (scope, element) {
      var eventID  = document.getElementById('audios').getAttribute('data-event');

      scope.$watch('srce', function (newVal, oldVal) {
         if (newVal !== undefined) {
             scope.file = $sce.trustAsResourceUrl("data/events/" + eventID +
             "/recursos/audio/" + newVal);
         }
      });
    }
  };
}]);


// Media Element
app.directive('mediaelem', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
     $(element).mediaelementplayer();
    }
  };
});

audios指令用於ng-repeat上，以顯示任何特定事件的所有音頻文件。 但我也想將mediaelementplayer插件應用於所有生成的音頻標簽。 有沒有一種方法可以結合兩個指令來完成此任務？

提前致謝。

編輯： Plunkr： http ： //plnkr.co/edit/i3IV1W5q6MChuzEsjuZf？p = preview

添加了一個Plunkr，以便您可以更好地了解我正在嘗試做什么。 我將音頻標簽作為一個獨立的示例進行了測試，以便您可以看到medialement插件在這種情況下有效。

Answer 1

我用以下指令解決了它：

app.directive('mediaelem', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
       $timeout(function(){
         var eventAudio  = document.querySelector('.audiocontainer').getAttribute('data-audio');
         $(element).attr('src', eventAudio).mediaelementplayer();
       }, 500);
    }
  };
});

我省略了我用於音頻標簽的指令，並使用了上面的指令，如下所示：

<div ng-repeat="audio in event.audios">
    <div class="audiocontainer" data-audio="data/events/{{event.id_evento}}/recursos/audio/{{audio}}">
      <audio controls src="" mediaelem>
    </div>
</div>

它可以正常工作。