Question

所以，我需要做一个简单的应用程序，只需点击一下按钮即可显示嵌入视频。我确实有很多麻烦让我的嵌入式玩家动态绑定但是我做到了！

我创建了一个工厂，其中包含数组形式的数据。

这些数据正在生成一个按钮列表，当我点击其中一个按钮时，我希望显示相关的播放器。要做到这一点，我需要切换显示的上一个视频的'tv'值，并将我刚刚点击的视频切换到。

控制器：

'use strict';
 angular.module('myApp')
   .controller('MyAppCtrl', function ($scope, datas) {
     $scope.awesomeThings = [
       'HTML5 Boilerplate',
       'AngularJS',
       'Karma'
    ];
    $scope.lives = datas.getLives();
 });

工厂：

'use strict';
angular.module('myApp')
  .factory('datas', function () {
    var factory = {};
    var lives = [
      {id:'1', title:'title1', tv: 'false', code:'code1'},
      {id:'2', title:'title2', tv: 'true', code:'code2'}
    ];
    factory.getLives = function () {
      return lives;
    };    
    return factory;
  });

嵌入播放器的指令：

'use strict';
angular.module('myApp')
  .directive('dmcloud', function($sce) {
    return {
      restrict: 'EA',
      replace: true,
      scope: { code:'=' },
      template: '<iframe width="512" height="288" frameborder="0" scrolling="no" ng-src="{{url}}"></iframe>',
      link: function (scope) {
        scope.$watch('code', function (newVal) {
          if (newVal) {
            scope.url = $sce.trustAsResourceUrl('http://api.dmcloud.net/player/embed/' + newVal);
          }
        });
      }
    };
  });

，最后是我的观点

<ul>
  <li ng-repeat="live in lives">
    <input type="submit" ng-click="lives.toogleLive()" value="{{live.title}}">
  </li>
</ul> 

<h2>TV : </h2>

<div ng-repeat="live in lives | filter:tv = true">
  <dmcloud code="live.code"></dmcloud>
</div>

正如您所看到的，我使用 tv 键过滤我的数据，只显示设置为 true 的数据。但我找不到一个干净的方法来改变适当的电视价值。我不知道该做什么以及在哪里放置我的toogleLive（）函数。

如果你有一个想法，我全都耳朵！

由于

Answer 1

这是一个例子： http://plnkr.co/edit/3oNbv1hXHixYcGZqEJug?p=preview 我将<iframe>更改为<div>。

Answer 2

您的指令似乎已设置为处理代码属性的更改。那么为什么不使用 activeTv 属性来存储对当前所选直播电视的引用。

<ul>
<li ng-repeat="live in lives">
<input type="submit" ng-click="activeTv = live" value="{{live.title}}">
</li>
</ul> 

<h2>TV : </h2>

<div>
<dmcloud code="activeTv.code"></dmcloud>
</div>

即时更新Factory中的数组

2 个答案: