在AngularJS指令中包裝Formstone Wallpaper jquery插件

努力在我的AngularJS應用程序中實現Formstone Wallpaper JQuery插件。我按照網站上的說明來了解AngularJS和JQuery不能很好地協同工作。在網絡中的許多文章中提到，我必須在jQuery插件中包裝AngularJS指令才能正確使用它。我在David Boike的教程中找到了關於如何將Knob jquery插件轉換爲AngularJS指令的教程。在AngularJS指令中包裝Formstone Wallpaper jquery插件

我試圖跟隨並實現了Formstone Wallpaper插件。這是我的嘗試：

'use strict'; 

angular.module('app').directive('formstoneWallpaper',[function() { 
    return { 
      restrict: 'E', 
      link: function (scope, elem, attrs) { 
        elem.wallpaper({ 
          source: { 
            poster: attrs.poster, 
            mp4: attrs.mp4, 
            ogg: attrs.ogg, 
            webm: attrs.webm 
          } 
        }); 
      } 
    }; 
}]);

然後我的HTML標記的變化：

<div class="container-fluid"> 
    <div class="row wall"> 

     <formstone-wallpaper 
      poster="modules/launch/videos/ocean.jpg" 
      mp4="modules/launch/videos/ocean.mp4" 
      ogg="modules/launch/videos/ocean.ogv" 
      webm="modules/launch/videos/ocean.webm" 
     ></formstone-wallpaper> 

    </div><!--row--> 
</div><!--container-->

然而，這不會導致所期望的全寬響應視頻壁紙。相反，width和height設置爲0px。因此我沒有在我的網站上看到任何東西。但是，當我終止wallpaper-container和wallpaper-media類時，問題部分得到解決，因爲視頻最終出現（但是，它對屏幕大小沒有響應和適應性 - 這是我們首先進行這項練習的原因）。這是我的Chrome檢查員的截圖。 chrome

有人可以幫助我改進指令的代碼嗎？

來源

2015-02-06 soosap

朋友，原來上面的指令其實是沒問題的。我遇到的真正問題是我對嵌套的相對定位缺乏瞭解。我用this "resize" directive來動態設置我的容器的高度到視口的高度。

這是終於修復了我的問題的CSS：

formstone-wallpaper { 
     display: block; 
     position: relative; 
     width: auto; 
     height: auto; 
     padding: 100px 0; 
     min-height: 100%; 
     background: no-repeat center center; 
     background-attachment: scroll; 
     background-size: cover; 
}

將「調整」屬性的容器上，像這樣：

<div class="container-fluid" data-ng-style="style()" resize> 
    <div class="row"> 

     <formstone-wallpaper 
      poster="modules/launch/videos/ocean.jpg" 
      mp4="modules/launch/videos/ocean.mp4" 
      ogg="modules/launch/videos/ocean.ogv" 
      webm="modules/launch/videos/ocean.webm" 
     ></formstone-wallpaper> 

    </div><!--row--> 
</div><!--container-->

來源

2015-02-13 09:00:11 soosap

也許有人有這樣做的更好的辦法哪種情況下我會接受你的答案。如果沒有，從現在起3個月，我會接受這個。 – soosap 2015-02-13 09:03:13

在AngularJS指令中包裝Formstone Wallpaper jquery插件

回答

相關問題