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元素并在list.html中保留rs-text-component时，rs-text-component正常工作。

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

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

有人会发光吗？ THX。

Answer 1

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

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

1 个答案: