Question

因此，无论出于何种原因，我正在尝试创建一个滑块，其中每张幻灯片的内容都是不同的HTML模板。因此，您可以说它不是图像滑块，而是一个HTML滑块。

所以在我的HTML中我只有这个代码，滑块的控件也在这个HTML模板中：

<slide-template></slide-template>

这是我的整个幻灯片模块：

(function() {
    'use strict';

    angular
        .module('slideCtrl', [])

    .directive('slideTemplate', function() {
        return {
            restrict: 'E',
            templateUrl: 'views/slides/slide-1.html',
            replace: true,
            controller: 'slideController',
            controllerAs: 'slides'
        }
    })

    .controller('slideController', function() {

        var vm = this;

    });

})();

我不确定如何向前推进，我已经尝试过环顾四周但却找不到任何我觉得可以使用的东西。在控制器内部，我希望有一组幻灯片模板URL和一个相应的变量来指示当前幻灯片：

slideUrl = [ 'views/slides/slide-1.html', 'views/slides/slide-2.html'];
slideNum = 0;

理想情况下，我希望我的指令使用这些变量来确定它将用于templateUrl的变量。因此，默认情况下，您可以看到slideNum为0，这意味着我要使用slide1.html或slideUrl[0]。所以，我的templateUrl就像slideUrl[slideNum]。当然，由于指令无法访问该数据，因此无法完成此操作，因此我不确定如何执行此操作。

最终结果是，如果您点击其中一个幻灯片导航图标，则会更新slideNum变量，这会立即更改所使用的templateUrl。

我想我基本上想要一个不依赖于某些图像的滑块或类似内容的滑块，而是一个实际HTML内容的滑块。

有什么想法吗？如果我没有很好地解释自己，请告诉我。

Answer 1

嗨，我会通过创建一个“main.html”模板来解决这个问题，并在其中：

//main.html

<div ng-if="slide == 1"> 
<ng-include src="'slide1.html'"/>
</div>

<div ng-if="slide == 2"> 
<ng-include src="'slide2.html'"/>
</div>

<div ng-if="slide == 3"> 
<ng-include src="'slide3.html'"/>
</div>

//controller

.controller('slideController', function() {
    $scope.slide = 1
   //logic to switch slides

    });

对于幻灯片转换上的动画，请查看此代码笔 animations

Answer 2

我会建议一个主要指令，你可以将不同的幻灯片放在一个页面上。

例如，主要指令：

<div ng-include src="'slider0.html'" ng-if="slider%4==0"></div>
<div ng-include src="'slider1.html'" ng-if="slider%4==1"></div>
<div ng-include src="'slider2.html'" ng-if="slider%4==2"></div>
<div ng-include src="'slider3.html'" ng-if="slider%4==3"></div>

然后在您设置的指令的控制器中：

$scope.slider = 0;
// Some more logic like:
$scope.slider++;

Answer 3

您可以将其移动到链接函数，并通过将已编译的幻灯片添加到slideUrl数组中来动态替换它们。此方法足够灵活，允许您管理控制器中的幻灯片，也可以通过范围属性将幻灯片URL传递给指令。

.directive('slideTemplate', function($http, $compile, $templateCache) {
    return {
        restrict: 'E',
        replace: true,
        controller: 'slideController',
        controllerAs: 'slides',
        link : function(scope, el, attrs) {
            // Bind active slide number to controller scope
            scope.slides.num = 0;

            // Declare slide urls
            var slideUrl = [
                'views/slides/slide-1.html',
                'views/slides/slide-2.html'
            ];

            // Load a slide and replace the directives inner html
            // with the next slide.
            function loadSlide(template) {
                // Get the template, cache it and append to element
                $http.get(template, { cache: $templateCache })
                    .success(function(content) {
                        el.replaceWith($compile(content)(scope));
                    }
                );
            }

            // Progress to the next slide, this is bound to the
            // controllers scope and can be called from there.
            scope.slides.next = function() {
                var next = scope.slides.num + 1;
                var slide = slideUrl[next] ? next : slide;
                scope.slides.num = slide;

                loadSlide(slideUrl[slide]);
            }

        }
    }
});

Angular - 如何使用动态templateUrl作为指令？

3 个答案: