我怎么能改变这个角度函数来使用指令答案

【问题标题】：How could I change this angular function to use a directive我怎么能改变这个角度函数来使用指令
【发布时间】：2013-12-25 06:31:48
【问题描述】：

我知道 dom 操作不应该在控制器中，所以我很好奇处理这些 jquery 事件的正确“Angular”方式。

这是我的控制器功能之一

    $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 操作，但仍然可以达到相同的效果。

【问题讨论】：

考虑声明性，将当前状态存储在 $scope 上。对于您的示例，您可以有一个标志$scope.player.isRecording = true/false;，然后您的#Pause 元素例如可以有：ng-class="{ 'btn-warning': player.isRecording }" 和您的恢复按钮：ng-class="{ 'btn-default': player.isRecording }" ng-disabled="player.isRecording"。有一个万能的解决方案在很大程度上取决于实际情况。对于函数的调用，使用控制器也不错。（请记住，控制器是一个视图模型，它是一个专门为视图添加功能而开发的模型。）
感谢您的回复。例如，如果我的暂停元素需要监听 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' }"。
如果控件很复杂，您可以将其转换为带有模板的指令，将所有这些抽象出来。对于我肯定会选择的录音机/播放器，而不是将其全部放在一个视图中。分离使测试更容易，让事情更容易理解。
是的，我想通了。我需要一个模板。我只是没有它只是角度 js 文档对我/学习如何构建自定义指令/模板没有超级帮助

标签： javascript jquery angularjs

【解决方案1】：

您可以创建整个 mediaplayer 指令，也可以使用我在 cmets 中描述的方法内联使用它。但是我觉得抽象它会让它感觉更干净。

This plnkr 包含如何创建某种受状态约束的媒体播放器指令的工作示例。

视图中生成的代码最少：

<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>

函数 play()、pause()、record()、stop() 和字段 state、states 和 songName 由指令的链接函数提供。

用于执行指令take a look at the plnkr。

【讨论】：

您可能希望将模板代码放在您的答案中，以供其他用户快速参考
我认为它太大而不能放在一个帖子中，特别是因为它跨越了多个文件。但是我会单独添加模板的代码。