1. 홈
  2. 질의 응답
  3. stellar.js를 사용하는 Angular.js 지시어가 여러 번 사용되었습니다. 첫 번째 것만 작동합니다.

stellar.js를 사용하는 Angular.js 지시어가 여러 번 사용되었습니다. 첫 번째 것만 작동합니다.

2015-02-01 7 views
2

시차 효과에 stellar.js를 사용하는 angular.js 지시문을 작성했습니다. 같은 지시어를 하나씩 여러 번 호출하면 stellar.js는 첫 번째 지시문에서만 작동합니다. DOM에 요소를 주입 한 후 별을 다시 초기화해야하는 $.stellar('refresh');에 대해 읽었지 만 나에게는 아무런 영향이 없었습니다. 창문에 항성을 부르는 것도 효과가 없었습니다. 이것은 내가 지시어 사용하는 방법입니다stellar.js를 사용하는 Angular.js 지시어가 여러 번 사용되었습니다. 첫 번째 것만 작동합니다.

angular.module('ClientApp') 
    .directive('parallaxModule', function() { 
     return { 
      templateUrl: 'views/parallax-module.html', 
      restrict: 'E', 
      scope: { 
       data: '=' 
      }, 
      controller: function() { 
       $(function(){ 
        $(this).stellar({ 
         horizontalScrolling: false, 
         verticalScrolling: true, 
         verticalOffset: 50 
        }); 
       }); 
      } 
     }; 
    });

: 여기

내 지시어의 코드 

<parallax-module data="sectionData.para"></parallax-module> 
<parallax-module data="sectionData.para"></parallax-module>

을 그리고 여기 내 템플릿입니다 : 여기 

<div class="parallax-module" data-stellar-background-ratio="0.2"> 
    <div class="wrapper" data-stellar-ratio="2.5"> 
     <div class="title">{{data.title}}</div> 
     <div class="caption">{{data.caption}}</div> 
    </div> 
</div>

가 plunker입니다 : http://plnkr.co/edit/TJbPL3dhSsiitZQWm9Qe?p=preview

출처

2015-02-01 dorthrithil

+0

당신이 plunker을 만들 수 있습니까? –

+0

여기 plunker가 있습니다 : http://plnkr.co/edit/TJbPL3dhSsiitZQWm9Qe?p=preview – dorthrithil

+0

@dorthrithil는 내 대답으로 문제를 해결합니까? – Rebornix

답변

1

$timeout은 별의 플러그인이 적용될 예정이므로 각 시차 요소가 아닌 스크롤 컨테이너에 적용됩니다. $(window).stellar();

을 그리고, $timeout와 코드 다이제스트 큐의 끝을 "대기"와 그것이 실행될 때, 모든 지시는로드 : 워드 프로세서의 예에서 이것은 window인가된다. 유감스럽게도 각 지시문에 대해 불필요하게 실행됩니다.

해결 방법은 지시문을 컨테이너에 적용하는 것입니다.

<body parallax-container> 
    <div data-stellar-background-ratio="0.2"> 
    ... 
    </div> 

    <div data-stellar-background-ratio="0.2"> 
    ... 
    </div> 
</body>

plunker

EDIT : 그 용기에이 용액 (예 data-stellar-background-ratio 포함)이 별 호환 소자 인에 의존

.directive("parallaxContainer", function(){ 
    return { 
    link: function(scope, element){ 
     element.stellar({ 
      horizontalScrolling: false, 
      verticalScrolling: true, 
      verticalOffset: 0 
     }); 
    } 
    } 
})

: 그럼으로 간단하게 :

위의 코드는 시차 요소가로드되면 작동하지 않습니다. 에드. 이것은 약간 복잡하지만 많은 것은 아닙니다. 이 배열에서는 플러그인을 트리거하는 컨테이너 지시문과 컨테이너에 등록하고로드되었을 때 컨테이너에 알릴 실제 시차 요소 지시문이 필요합니다.

요소 지시문은 내용이로드 될 때 ng-include을 사용하여 알림을받을 수 있습니다. 이 지시문은 require: "^parallaxContainer"을 사용합니다. 

app.directive('parallaxModule', function() { 
    return { 
     template: '<div ng-include="\'parallax-module.html\'" onload="notifyLoaded()"></div>', 
     restrict: 'E', 
     scope: { 
     data: '=' 
     }, 
     require: "^parallaxContainer", 
     link: { 
     pre: function(scope, element, attrs, parallaxContainer){ 
      parallaxContainer.registerElement(); 
      scope.notifyLoaded = parallaxContainer.notifyElementLoaded; 
     } 
     } 
    }; 
    })

parallaxContainer

지시는 방법을 등록하고 통지하는 노출 제어기를 추가한다. 가 활성화 - (아마도 별의 문서에서이에 대한 몇 가지 정보가 어떤 이유로) 그리고 모든 아이들이 stellar가 작동하지 않습니다

plunker

참고

app.directive("parallaxContainer", function() { 
    var parallaxElementCount = 0; 
    var parallaxElementLoaded = 0; 
    return { 
     controller: function($element){ 

     this.registerElement = function(){ 
      parallaxElementCount++; 
     }; 

     this.notifyElementLoaded = function(){ 
      parallaxElementLoaded++; 

      if (parallaxElementCount !== 0 && parallaxElementCount === parallaxElementLoaded){ 

      $element.stellar({ 
       horizontalScrolling: false, 
       verticalScrolling: true, 
       verticalOffset: 0 
      }); 
      } 
     } 
     }, 
    } 
    })
넣은 플러그인을 트리거 두 번 이상 트리거되었으므로 더 많은 하위 요소를로드해도 아무 것도 변경되지 않습니다.

출처

2015-02-02 12:19:24

+0

정답입니다. – Rebornix

+0

필자는이 프로젝트를 내 프로젝트에서 테스트했지만 필자가 parallaxModules를 동적으로로드하고 있기 때문에 parallaxContainer는 모듈이로드되어 DOM에 삽입되기 전에 스텔라 get이 초기화 될 때 아무런 해결책이 없습니다. 하지만 제 생각에 모듈이로드 된 별의 호출은 내 특정 상황에서도 불필요한 호출을 피하는 아이디어를 실현해야합니다. 나는 그다지 멀지 않지만 그것이 효과가 있었는지 알려줄 것입니다. 감사. :] – dorthrithil

+0

@dorthrithil, 사실, 당신이 동적으로로드하는 경우, 그것은 복잡합니다. 간단히하기 위해 솔루션이 더 좋을 수도 있습니다. 그래서 내가 대답으로 게시했음을 제안했습니다. –

0

해결책을 찾았습니다. 스텔라는 각 프레임 워크의 일부가 아니기 때문에 $ apply()를 사용하여 별 모양을 실행해야합니다. 하지만 $ digest는 이미 내 지시문에서 진행 중이므로 다른 다이제스트주기에서 stellar() 호출을 얻으려면 $ timeout을 사용해야합니다. $ timeout은 암묵적으로 $ apply를 호출합니다. 또한 angular.element ($ window)에 stellar()를 호출하여 여러 개의 지시문을 올바르게 실행해야합니다.
그래서 여기 내 작업 코드입니다 :

angular.module('ClientApp') 
    .directive('parallaxModule', function ($timeout, $window) { 
     return { 
      templateUrl: 'views/parallax-module.html', 
      restrict: 'E', 
      scope: { 
       data: '=' 
      }, 
      link: function() { 
       $timeout(function() { 
        angular.element($window).stellar({ 
         horizontalScrolling: false, 
         verticalScrolling: true, 
         verticalOffset: 50 
        }); 
       }); 
      } 
     }; 
    });

출처

2015-02-02 13:18:42 dorthrithil

 관련 문제

  • 관련 문제 없음^_^