Question

我有一个看起来像这样的指令

.directive('audioPlay', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attr) {

      var player = element.children('.player')[0];
      scope.playOrPause = true;

      scope.playMusic = function() {
        scope.playOrPause = false;
        player.play();
      }

      scope.stopMusic = function() {
        scope.playOrPause = true;
        player.pause();
      }

    }
  };
})

我正在使用此指令播放和暂停音频

<audio-play>
  <audio class="player">
    <source src="http://fire.wavestreamer.com:9711/UrbanetRadio"/>
  </audio>
  <button ng-click="playMusic()"
          ng-hide="!playOrPause">
  </button>
  <button ng-click="stopMusic()"
          ng-show="!playOrPause">
  </button>
</audio-play>

这是一个我需要在每个视图中都有音频的应用程序，用户去哪里都不重要，实时流媒体应该在那里。

我有一个控制器连接到选项卡，这是一个抽象视图，所以控制器是用户去的任何地方，我需要调用该指令并将其附加到该控制器，我该怎么做？

Answer 1

如果您希望播放器位于所有视图中，则表示它应存在于根视图中，并且嵌套视图不会包含它。您应该重新构建视图层次结构。

Answer 2

我担心你的问题的答案（不涉及重构你的html层次结构）有点脏。

1）使用$ rootScope而不是scope。您可以在指令中注入内容，因此将指令重新定义为：

import logging
from openerp.osv import fields, osv
from openerp import tools
from openerp.tools.translate import _



class sale_order_line(osv.osv):

    _inherit='sale.order.line'
    _columns= {
        'length': fields.float("Length"),
        'width': fields.float("Width"),
        'no_end_product': fields.integer("End Product No."),
    }

sale_order_line()

这很脏，因为你不想在$ rootScope上扔东西，除非你必须这样做。这就像.directive('audioPlay', function($rootScope) { return { restrict: 'E', link: function(scope, element, attr) { var player = element.children('.player')[0]; $rootScope.playOrPause = true; $rootScope.playMusic = function() { $rootScope.playOrPause = false; player.play(); } $rootScope.stopMusic = function() { $rootScope.playOrPause = true; player.pause(); } } }; })。它是角度应用程序的全局，并且很快就会混乱。

2）手动抓住你感兴趣的范围。

window

这很脏。。。只是，这么脏，不应该大声说出来。

是否有理由不能将.directive('audioPlay', function($rootScope) { return { restrict: 'E', link: function(scope, element, attr) { var $scope = $('[ng-controller="WhateverController"]').scope(); var player = element.children('.player')[0]; $scope.playOrPause = true; $scope.playMusic = function() { $scope.playOrPause = false; player.play(); } $scope.stopMusic = function() { $scope.playOrPause = true; player.pause(); } } }; })和playMusic放在控制器内的实际范围上？从指令内部定义范围上的新函数对我来说似乎是一个坏主意。

如何通过一个控制器在不同的视图中调用相同的指令

2 个答案: