基於數據和標籤屬性填充角度指令

我正在構建一個角度指令，它將在同一頁面上的多個位置。我有幾個不同的視頻標籤，並且想要構建足夠靈活的東西，以便我可以將正確的視頻放在正確的位置。基於數據和標籤屬性填充角度指令

所以，在我狀態的視頻，我已經得到了它保持視頻細節的對象

$scope.videos = { 
    "main":{ webRTCStream: streamDetails}, 
    "guest":{ webRTCStream: streamDetails}, 
    "other": { webRTCStream: streamDetails} 
}

然後我有一個流指令

.directive('stream', function(){ 
     return { 
      restrict: 'E', 
      controller: 'videoController', 
      template: '<video></video>', 
      link: function(){ 
       elm[0].firstChild.src=URL.createObjectURL(stream); 
       elm[0].firstChild.play(); 
      } 
     } 
});

我想我的html是

<stream data-name="main"></stream> 
<stream data-name="guest"></stream> 
<stream data-name="other"></stream>

什麼是最好的方法來選擇正確的流進入正確的指令？

來源

2014-06-26 pedalpete

你可以在你的指令雙向綁定綁定您的視頻信息：

app.directive('stream', function(){ 
     return { 
      restrict: 'E', 
      template: '<video></video>', 
      scope:{ 
       name: '=' 
      }, 
      link: function(scope, element, attr){ 
       var video = element.find('video'); 
       video.attr('src', scope.name); 
       video[0].play(); 
      } 
     } 
});

並綁定這樣的視頻信息：

<stream data-name="videos.main"></stream> 
<stream data-name="videos.guest"></stream> 
<stream data-name="videos.other"></stream>

一個簡化的解決方案請參見本this plunker。

來源

2014-06-26 00:30:06

你能做到這一點，從您的視圖獲取數據名稱...

.directive('stream', function(){ 
     return { 
      restrict: 'E', 
      controller: 'videoController', 
      scope: { data-name: '='}, 
      template: '<video></video>', 
      link: function(){ 
       elm[0].firstChild.src=URL.createObjectURL(stream); 
       elm[0].firstChild.play(); 
      } 
     } 
});

然後你就可以在你的控制器使用數據名稱獲取從視頻陣列和繁榮合適的對象。

來源

2014-06-26 00:30:08 tarrball

基於數據和標籤屬性填充角度指令

回答

相關問題