Angular - How to use a dynamic templateUrl for a directive?

Question

So, for whatever reason, I am trying to create a slider, where the contents of each slide are different HTML templates. So instead of an image slider, you could say it's a HTML slider.

So in my HTML I just have this code, and the controls for the slider are also inside this HTML template:

<slide-template></slide-template>

And here is my entire slide module:

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

    });

})();

I'm not sure how to move forward with this, I've tried looking around but haven't found anything that I felt I could use. Inside the controller, I would like to have an array of slide template URLs and a corresponding variable to indicate the current slide:

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

Ideally, I would then like my directive to use these variables to determine what variable it will use for templateUrl. So by default, you can see that slideNum is 0, meaning that I want to use slide1.html or slideUrl[0]. So, my templateUrl would be something like slideUrl[slideNum]. Of course, this can't be done as the directive wouldn't be able to access that data, so I'm not sure how to do this.

The end result would be that if you clicked one of the slide navigation icons, you would be updating the slideNum variable, which would instantly change the templateUrl used.

I guess I am essentially wanting a slider which doesn't rely on some images or something like that for content, but instead is a slider of actual HTML content.

Any ideas? If I haven't explained myself well enough, please let me know.

Are the slide URLs always the same? Or can they change ? Interesting question by the way. — ndsmyter, Jul 08 '15 at 09:06
@ndsmyter For now, let's just say that yes the URLs will always be the same. So, the `slideUrl` array will just be manually created by me to hold all the slides. — germainelol, Jul 08 '15 at 09:07
Is it something like https://github.com/angular/angular.js/issues/1039 you want? — ndsmyter, Jul 08 '15 at 09:11
possible duplicate of [Angular.js directive dynamic templateURL](http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl) — Sergiu Paraschiv, Jul 08 '15 at 09:15
@ndsmyter I'll have a read, it seems like it could be, but I've seen some similar posts before and just seem to have difficulty actually implementing it. I also added a little update about what I'm trying to achieve too; I know a lot of sliders use some sort of content inside an `
I added a possible way I would do it below. Maybe that helps.. — ndsmyter, Jul 08 '15 at 09:22

Arno_Geismar · Answer 1 · 2015-07-08T09:32:14.537

2

hi I would solve it like this by creating a "main.html" template and in that:

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

    });

for animations on the slide transitions take a look at this code pen animations

edited Jul 08 '15 at 09:32

answered Jul 08 '15 at 09:17

Arno_Geismar

2,296
1
15
29

How about `ng-include src="{{'slide' + slide + '.html'}}`? – Sergiu Paraschiv Jul 08 '15 at 09:19
@Arno_Geismar Thanks for your answer, I was thinking about something like this before. If I can't think of a cleaner way of doing it then I think I'll just accept this as the answer and do it this way. It seems like the easiest solution for what I want to do at least. – germainelol Jul 08 '15 at 09:20
@SergiuParaschiv Maybe that could cause issues if you wanted to animate the slide transitions? If you did it this way then you could maybe add a transition between the slides, I can't think how you'd do that if you just had a single `ng-include` – germainelol Jul 08 '15 at 09:22
You're `ng-include` tags will not work because you only use a double quote. You should add single quotes too. See the documentation of the `src` attribute on https://docs.angularjs.org/api/ng/directive/ngInclude#animations – ndsmyter Jul 08 '15 at 09:26
@ndsmyter your are correct I updated my answer. feel free to make such edits yourself I will be happy to accept – Arno_Geismar Jul 08 '15 at 09:27

score 1 · Accepted Answer · answered Jul 08 '15 at 09:21

1

I would suggest a main directive, where you would place the different slides on one page.

For instance, the main directive:

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

And then in the controller of the directive you set:

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

answered Jul 08 '15 at 09:21

ndsmyter

6,535
3
22
37

How would this work if you wanted to add some transitions do you think? One reason I was trying to find another solution was transitions. I thought of adding some `ng-if`'s to the main HTML file instead of a directive and adding a transition between them for when they show/hide. – germainelol Jul 08 '15 at 09:26
`ng-include` has an onload parameter. Which you can probably use for the animations you want: https://docs.angularjs.org/api/ng/directive/ngInclude#animations . I haven't used these animations or transitions in the past, so I am not completely sure how this works. – ndsmyter Jul 08 '15 at 09:27
thanks I'll give this a go. It's a cleaner solution than the other answer so I'll give it. It was definitely too much extra code/work involved in the original idea. – germainelol Jul 08 '15 at 09:31

David Barker · Answer 3 · 2015-07-08T09:39:21.580

You could move this to a link function and replace your compiled slide dynamically by adding them to the slideUrl array. This method is flexible enough to allow you to manage the slides in the controller, also you could potentially pass the slide urls to the directive through an scoped attribute.

.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 - How to use a dynamic templateUrl for a directive?

3 Answers3