2

我正在使用 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>

具有多个步骤的幻灯片应该是垂直的。所有其他都应该是水平的。控制器返回步骤并设置 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);
    }
    }
}
});

我如何编写它使其看起来像角度代码？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>元素（如果只有一个）。它可能看起来像这样：

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 结构，从而更容易创建可预测的和干净的 DOM 结构，而不是使用散布在其中ngShow的 s 和es的一堆 DOM 元素。ngSwitch

于 2013-02-09T03:55:13.097 回答