* wrapper * 지시어 작성 선언적 AngularJS

Question

AngularJS 및 Reveal.js를 사용하여 슬라이드 쇼를 만들고 있습니다. 공개하면 양식이 필요합니다.

<div class="slides"> 
    <section> 
    </section> 
</div> 

가로 슬라이드 용.

<div class="slides"> 
    <section> 
     <section> 
     </section> 
    </section> 
</div> 

나는 각도를 사용하여이 페이지를 렌더링하고있다 : 수직 슬라이드는 두 개의 섹션이 있지만하여 여러개로

<div ng-app='myApp' class="reveal"> 
    <div class="slides" ng-controller='MyController'> 
     <section slide ng-repeat="slide in slides"> 
     </section> 
    </div> 
</div> 

<script src="https://raw.github.com/hakimel/reveal.js/master/js/reveal.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script> 
</body> 
</html> 

슬라이드 는 수직해야 단계를 반복합니다. 다른 모든 것들은 수평 적이어야합니다. 컨트롤러는 단계를 반환하고 설정은 공개 :

function MyController($scope) { 
    $scope.slides = [ 
     { 'steps': ['a'] }, 
     { 'steps': ['b1', 'b2'] }, 
     { 'steps': ['c1'] } 
    ]; 
    setTimeout(function() { 
      Reveal.initialize({ 
       loop: false, 
       transition: Reveal.getQueryHash().transition || 'none' 
      }); 
    }, .1 * 1000); 
} 

이 지침은 단계의 주위에 새로운 요소와 속성을 추가 할 필요가있다. 이 각도 코드처럼 보이는 것을

app.directive('slide', function() { 

var wrapContent = function (content) { 
    return '<h1>' + content + '</h1>'; 
}; 

return { 
    restrict: 'A' 
    ,link: function (scope, element, attrs, controller) { 
    // resorting to imparative jQuery way 
    if (scope.slide.steps.length == 1) { 
     element.html(
     wrapContent(scope.slide.steps[0]) 
     ); 
    } else { 
     var sections = ''; 
     for (i=0,len=scope.slide.steps.length; i < len; ++i) { 
     sections += 
      '<section ' + 
      function() { 
      result = ''; 
      if (i !== len-1) { 
       result = 'data-autoslide="1000" '; 
      } 
      return result; 
      }() + 
      '>' + 
      wrapContent(scope.slide.steps[i]) + 
      '</section>'; 
     } 
     element.html(sections); 
    } 
    } 
} 
}); 

어떻게이 같은 쓰는가 : 다음 지침처럼 내 필수, 추한 당황, jQuery를 무엇입니까? jsfiddle

컴파일, 링크, 바꾸기를 모두 시도해 보았습니다.

Answer 1

범위의 slides 속성에 정의 된 모든 섹션이 있으므로 전체 슬라이드 쇼를 지시문으로 옮길 것입니다. 이 지침 자체 내부

<div ng-app='myApp' class='reveal' ng-controller='MyController'> 
    <div slideshow='slides'></div> 
</div> 

, 나는 슬라이드의 각을 반복하고 <section> 요소를 만들 것입니다. 각 슬라이드에 대해 단계를 반복하고 <section> 요소 (둘 이상의 요소가있는 경우) 또는 <h1> 요소 (하나만있는 경우)를 만듭니다.

for (var i = 0; i < slides.length; i++) { 
    var section = angular.element("<section>"); 
    var steps = scope.slides[i].steps; 

    if (steps.length == 1) { 
    var content = angular.element("<h1>").html(steps[0]); 
    section.append(content); 
    } else { 
    for (var j = 0; j < steps.length; j++) { 
     var subSection = angular.element("<section>"); 
     if (j < steps.length - 1) 
     subSection.attr('data-autoslide', '1000'); 
     var content = angular.element("<h1>").html(steps[j]); 
     subSection.append(content); 
     section.append(subSection); 
    } 
    } 
} 

그런 다음 section을 지시문의 요소에 추가 할 수 있습니다. 그리고 지시어 내에서 DOM이 빌드 된 것을 알고 있기 때문에 지시문 자체로 컨트롤러에서 Reveal.initialize으로 호출을 옮길 수 있습니다 (일반적으로 DOM 조작 또는 라이브러리 호출을 수행하는 가장 좋은 방법은 아닙니다).

몇 가지 사소한 변경과 함께 모두 넣고이 jsFiddle의 코드로 끝낼 수 있습니다 : 당신은 아마 지시어에 더 선언적 스타일로이 코드를 작성할 수 있지만 http://jsfiddle.net/BinaryMuse/CXqAb/

,이 생각 아마도 좀 더 읽기 쉬울 것입니다. Reveal과 같은 특정 DOM 구조를 기대하는 제 3 자 라이브러리와 통합하면 ngShow 및 ngSwitch을 사용하는 DOM 요소를 사용하여 얻을 수있는 것보다 예측 가능하고 깨끗한 DOM 구조를 쉽게 만들 수 있습니다. 그 (것)들 사이에서 뿌려지는 es.