一个controller中的多个指令，任何时候只能显示一个

Question

我这里有一个控制器和两个指令：

app.controller('ListCtrl', function($scope){
 $scope.audioOptions = {
                        audio: [{
                          file : "sound/world.mp3",
                          type: "mp3"
                        },
                        {
                          file : "sound/world.ogg",
                          type: "ogg"
                        }],
                        playOnclick : true,
                        playOnload: true
                      };
 $scope.textOptions={
                       text : "Bird",
                       audio: [
                        {
                          file : "sound/world.mp3",
                          type: "mp3"
                        },
                        {
                          file : "sound/world.ogg",
                          type: "ogg"
                        }],
                        playAudioOnClick : true
                     };                      
});

app.directive('rsTextComponent',['ngAudio',function(ngAudio){
   return {
    restrict:'E',
    replace:true,
    scope:{options:"=options"},
    controller:function($scope){
        //click to play
       $scope.playTextAudio = function(){
         if($scope.options.playAudioOnClick)
            {
                 ngAudio.play(audioCurrent);
            }
       }
    },
    template:'<div class="textbar" ng-click="playTextAudio()">{{options.text}}</div>'
};
}]);

app.directive('rsAudioComponent',['ngAudio',function(ngAudio){
return {
    restrict:'E',
    replace:true,
    scope:{options:"=options"},
    controller:function($scope){
        //click to play
       $scope.playAudio = function(){
         if($scope.options.playOnclick)
            {
                 ngAudio.play(audioCurrent);
            }
       }
    },
    template:'<div class="audiobar"><button ng-click="playAudio()">PLAY</button></div>'
};
}]);

然后我在list.html中渲染它：

<div ng-controller="ListCtrl">
  <rs-audio-component options="audioOptions">
  <rs-text-component options="textOptions">
</div>

似乎一切正常，但问题是，当我开始浏览list.html时，只有一个指令可以渲染和显示，另一个消失了。它是有线的。以下是我测试的步骤：

当我注释掉 rs-audio-component 元素并将 rs-text-component 保留在 list.html 中时，rs-text-component 可以正常工作。

当我注释掉 rs-text-component 元素并将 rs-audio-component 保留在 list.html 中时，rs-audio-component 可以正常工作。

但是当我在list.html中保留两个时，只有rs-audio-component可以显示，rs-text-component消失了。

有人能给点亮光吗？谢谢

Answer 1

您需要关闭指令标签。这是 XML 方式。 <rs-audio-component></rs-audio-component>

一个controller中的多个指令，任何时候只能显示一个

Multiple directives in a controller, only one can display at any time

directive

angularjs