jwplayer角度指令

我想創建一個角度指令，將更新提供給jwplayer的元素播放列表url更改時的URL。我知道/檢查了當我的控制器中的作用域（scope.tvUrl）發生變化時，el屬性播放列表URL變化，所以我知道問題不在代碼的這一部分。jwplayer角度指令

<div pip-player playlist-url='{{tvUrl}}' channel-logo='{{channelLogo}}' id="pip-player"></div>

這是我的指令，第一個執行console.log（「PPTV打」）註銷，但沒有在鏈接功能運行時，我還以爲我在「歸還指令」部分實例鏈接，但我不要認爲是這樣。任何關於鏈接部分的幫助都很棒，或者使用其他方法（使用jwplayer作爲服務）的任何建議都會很棒。謝謝您的幫助！

(function(){ 
    'use strict'; 
    angular 
    .module('app') 
    .directive('pipPlayer', ppTv); 

    function ppTv() { 
     console.log('ppYv hit') 
     var directive = { 
      link: link, 
      restrict: 'E', 
      transclude: false, 
      scope: { 
       playlistUrl: '@playlistUrl', 
       channelLogo: '@channelLogo', 
      } 
     } 

     return directive; 

     function link(scope, element, attrs) { 
      console.log('jwplayer is starting') 

      jwplayer('pip-player').setup({ 
       width: '100%', 
       height: 360, 
       file: scope.playlistUrl, 
       image: scope.channelLogo, 
       //file: "http://yipcontent-lh.akamaihd.net/i/[email protected]/master.m3u8?hdnts=exp…%7Ehmac%3D82c581395560a25c69b4beb3f679bb65645c644d4a2f1ac1682e89821325aa74", 
       //image: scope.channelLogo, 
       primary: 'flash', 
       autostart: true, 
       fallback: true, 
       androidhls: true, 
       type: 'hls' 
      }); 

     scope.$watch(attrs.pipPlayer, function(value) { 
      format = value; 
      updateChannel(); 
     }); 

    } 
} 

})();

來源

2016-02-02 pwborodich

你調用'返回指令。''之前$範圍可以watch'運行。不知道這是唯一的問題，但解決這是一個開始。 – funrob

這也有助於解決我的問題，謝謝funrob – pwborodich

所以經過一些重構的理解鏈接更好，我找到了解決辦法。

jwDirective.js

(function() { 
angular 
    .module('app') 
    .directive('pipScreen', ppTv); 

function ppTv() { 
    return { 
     restrict: 'E', 
     scope: { 
      playlistUrl: '@playurl' 
     }, 
     link: function (scope, element, attributes) { 
      attributes.$observe('playurl', function(value) { 
       jwplayer('pip-screen').setup({ 
        file: value, 
        image: '@channelLogo', 
        primary: 'flash', 
        autostart: true, 
        fallback: true, 
        androidhls: true, 
        type: 'hls' 
       }); 

      }) 

     } 
    }; 
} 
})()

來源

2016-02-04 15:52:33 pwborodich

jwplayer角度指令

回答

相關問題