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>

它没有任何问题。

在另一个指令的模板上使用angular指令？

1 个答案: