AngularJS 지시문에 Formstone Wallpaper jquery 플러그인을 바꿈

Question

AngularJS 응용 프로그램에 Formstone Wallpaper JQuery 플러그인을 구현하기가 어렵습니다. AngularJS와 JQuery가 잘 작동하지 않는다는 것을 알기 위해 사이트의 지침을 따랐습니다. 그물에있는 많은 기사에서 올바른 방법으로 사용하려면 AngularJS 지시문에 jquery 플러그인을 포함시켜야한다고 언급했습니다. AngularJS 지시문에 Knob jquery 플러그인을 워핑하는 방법에 관한 David Boike에 의해이 자습서를 찾았습니다.

나는 Formstone Wallpaper Plugin을 위해이를 수행하고 달성하려고 노력했다.

이

'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 관리자의 스크린 샷입니다.

누군가이 지침의 코드 개선에 도움을 줄 수 있습니까?

Answer 1

친구, 위 지시문이 실제로 괜찮은 것으로 밝혀졌습니다. 내가 가진 진정한 문제는 중첩 된 상대 위치 지정에 대한 나의 이해 부족이었습니다. this "resize" directive을 사용하여 컨테이너의 높이를 뷰포트의 높이로 동적으로 설정했습니다.

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