angularjs - 声明性地编写一个 *wrapper* 指令 AngularJS

Question

我正在使用 AngularJS 和 Reveal.js 创建幻灯片。显示要求表格

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

用于水平幻灯片。虽然垂直幻灯片有两个部分:

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

带有多个台阶的幻灯片应该是垂直的。所有其他的都应该是水平的。 Controller 返回步骤并设置 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 都无济于事。

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从 Controller (通常不是做 DOM 操作或库调用的最好主意)到指令本身。

把它们放在一起，加上一些小的改动，你可能会得到这个 jsFiddle 的代码: http://jsfiddle.net/BinaryMuse/CXqAb/

虽然您可能可以在指令中以更具声明性的风格编写此代码，但我认为这可能更具可读性，并且当与需要特定 DOM 结构的 Reveal 等第三方库集成时，可以更轻松地创建可预测的并且比使用一堆 DOM 元素可能实现的干净 DOM 结构 ngShow s 和 ngSwitch es分散在他们中间。