javascript - 在另一个指令的模板上使用 Angular Directive(指令)？

Question

我正在尝试将 Angular Directive(指令)应用于我在另一个指令的模板中创建的元素，但如果我将其添加为模板中的属性，则它不起作用。我有以下两个指令:

// 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>

它可以正常工作，没有任何问题。