Javascript 如何更改此角度函数以使用指令

我知道dom操作不应该在controller中，所以我想知道处理这些jquery事件的正确的“角度”方法是什么

这是我的一个控制器功能

    $scope.record = function (){
        $scope.slideChanges.push($scope.display);
        $scope.syncTimer.push(0);
        $scope.flashObject.doRecord();
        $("#Pause").removeClass().addClass("btn btn-warning");
        $("#Resume").removeClass().addClass("btn btn-default disabled");
        $("#Stop").removeClass().addClass("btn btn-danger");
        $("#Restart").removeClass().addClass("btn btn-primary");
        $("#Record").removeClass().addClass("btn btn-danger disabled");

    };

---

因此，我可以在这个函数之外删除dom操作，但仍然可以达到相同的效果。

您可以创建一个完整的mediaplayer指令，也可以使用我在注释中描述的方法内联使用它。然而，我想把它抽象出来，让它感觉更干净

包含如何创建某种由状态绑定的媒体播放器指令的工作示例

视图中生成的代码最少：

<div pf-music-player="somePlayer" file="{{fileToPlay}}"></div>

该指令的模板如下所示：

<span class="btn-group">
  <button class="btn" ng-disabled="state == states.Waiting || state == states.Loading"
    ng-class="{
        'btn-success': state == states.Stopped || state == states.Paused,
        'btn-danger': state == states.Playing
    }" ng-click="play()">Play</button>
  <button class="btn" ng-disabled="state == states.Waiting || state == states.Loading"
    ng-class="{
        'btn-success': state == states.Playing || state == states.Recording,
        'btn-danger': state == states.Paused
    }" ng-click="pause()">Pause</button>
  <button class="btn" ng-disabled="state == states.Waiting || state == states.Loading"
    ng-class="{
      'btn-success': state == states.Stopped || state == states.Paused,
      'btn-danger': state == states.Recording
    }" ng-click="record()">Record</button>
  <button class="btn" ng-disabled="state == states.Waiting || state == states.Loading"
    ng-class="{
      'btn-success': state == states.Playing || state == states.Recording || state == states.Paused,
      'btn-danger': state == states.Stopped
    }" ng-click="stop()">Stop</button>
</span>
<p ng-show="state != states.Waiting &amp;&amp; state != states.Loading">Playing {{songName}}</p>

玩
暂停
记录
停止
播放{{songName}

函数play（）、pause（）、record（）、stop（）和字段state、states和songName由指令的link函数提供

---

对于指令的实现。

考虑声明性，将当前状态存储在$scope上。对于您的示例，您可以有一个标志

$scope.player.isRecording=true/false

，那么您的#Pause元素（例如）可以有一个：

ng class=“{'btn warning'：player.isRecording}”

和您的简历按钮：

ng class=“{'btn default'：player.isRecording}”ng disabled=“player.isRecording”

。它太依赖于实际环境，因此无法提供一刀切的解决方案。对于函数的调用，使用控制器也不错。（请记住，控制器是一个viewmodel，它是一个专门为视图添加电源而开发的模型。）thx用于响应。例如，如果我的pause元素需要监听4个不同的状态，我需要4个不同的标志，我的#pause元素将有类似ng class=“{'btn warning'：player.isRecording，'btn success'：player.isStoped…}这就是为什么我说这在很大程度上取决于情况，在某些情况下，你只想控制播放器的状态（无论是录制、播放等），而在其他情况下，你想分配界面的状态（是否应该启用暂停按钮）但是，大多数情况下，最干净、最可维护的代码来自第一种方法。除了不同的标志，您还可以使用单个字段状态：

$scope.playerStatus='paused'；

，和

ng class=“{'btn warning'：playerStatus='recording'| | playerStatus='playing'，btn success'：playerStatus='stopped'}“

。如果控件很复杂，您可以将其转换为一个指令，并使用一个模板将所有这些内容抽象出来。对于一个录音机/播放器来说，我总是选择它，而不是把它放在一个视图中。分离让测试更容易，让事情更容易理解。是的，我想。我需要一个模板。我只是没有，只是angular js文档对我没有太大的帮助/对于学习如何构建自定义指令/模板你可能想把模板代码放在你的答案中，只是供其他用户快速参考。我认为它太大了，无法放在帖子中，特别是因为它跨越多个文件。但我将单独为模板添加代码。