我正在使用 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 都无济于事。
最佳答案
因为您已在 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 (在 Controller 中进行 DOM 操作或库调用通常不是最好的主意)到指令本身。
将所有内容与一些小的更改放在一起,您最终可能会得到此 jsFiddle 中的代码:http://jsfiddle.net/BinaryMuse/CXqAb/
虽然您可能可以在指令中以更具声明性的风格编写此代码,但我认为这可能更具可读性,并且当与像 Reveal 这样需要特定 DOM 结构的第三方库集成时,会更容易创建一个可预测且干净的 DOM 结构,而不是使用 ngShow
的一堆 DOM 元素所能实现的结构。和 ngSwitch
es分散在其中。
关于angularjs - 以声明方式编写 *wrapper* 指令 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14784195/