0

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.

Improve this question
6
  • Are the slide URLs always the same? Or can they change ? Interesting question by the way. Commented Jul 8, 2015 at 9: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. Commented Jul 8, 2015 at 9:07
  • Is it something like github.com/angular/angular.js/issues/1039 you want? Commented Jul 8, 2015 at 9:11
  • possible duplicate of Angular.js directive dynamic templateURL Commented Jul 8, 2015 at 9: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 <li> basically, but I am essentially wanting to create a slider where the slides are just HTML templates. Commented Jul 8, 2015 at 9:15

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

How about ng-include src="{{'slide' + slide + '.html'}}?
@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.
@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
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 docs.angularjs.org/api/ng/directive/ngInclude#animations
@ndsmyter your are correct I updated my answer. feel free to make such edits yourself I will be happy to accept
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++;
Improve this answer

3 Comments

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.
ng-include has an onload parameter. Which you can probably use for the animations you want: 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.
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.
0

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]); } } } });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.