2

AngularJS と Reveal.js を使用してスライドショーを作成しています。フォームが必要であることを明らかにする

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

横スライド用。垂直スライドには 2 つのセクションがあります。

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

angularを使用してこのページをレンダリングしています： 

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

複数のステップがあるスライドは垂直にする必要があります。他のすべては水平でなければなりません。コントローラーはステップを返し、Reveal を設定します。

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);
}

ディレクティブは、ステップの周りに新しい要素と属性を追加する必要があります。これが私の醜い、恥ずかしい、命令的な、jQuery のようなディレクティブです。

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);
    }
    }
}
});

これをAngularコードのように書くにはどうすればよいですか? jsfiddle

コンパイル、リンク、置換、ng-switch を試してみましたが、すべて役に立ちませんでした。

4

1 に答える 1

3

slidesスコープのプロパティですべてのセクションが定義されているので、おそらくスライドショー全体をディレクティブに移動します。

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

ディレクティブ自体の内部で、各スライドを繰り返し処理して<section>要素を作成します。スライドごとに、手順を繰り返して、<section>要素（複数ある場合）または<h1>要素（1つしかない場合）を作成します。次のようになります。

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/

ディレクティブではおそらくこのコードをより宣言的なスタイルで書くことができますが、これはおそらくもう少し読みやすいと思います。特定のDOM構造を期待するRevealのようなサードパーティのライブラリと統合すると、予測可能なものを簡単に作成できます。ngShowsとngSwitchesが散在しているDOM要素の束で達成できるよりもクリーンなDOM構造。

于 2013-02-09T03:55:13.097 に答える