Comments (12)
Hi Matthew,
I think that maybe would be interesting having the availability of changing some variables into the slides template through the scope system. This can complement the idea of making the whole dynamic template and getting it from a database, which I prefer.
But imagine you have a template like your default that is shared by many pages, like a projects template or whatever. The only two things different are the main photo and a text. So maybe could be interesting having the template and changing those two variables.
Like:
-
<img
src="{{ $scope.image }}" <----------------------------- something in this way
alt=""
width="1920"
height="1280"
data-bgposition="center bottom"
data-bgfit="cover"
data-bgrepeat="no-repeat"
data-bgparallax="10"
class="rev-slidebg"
data-no-retina><a class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0"
[..............]
'border-radius':'0 0 0 0'
}">
{{ $scope.text }} <---------------------- Somethign in this way
Hope this could help.
Thank you so much.Best,
Jose
from angular-revolution.
I've played around with this concept earlier, but it was angular 1.3 if I remember correctly and had a few issues with the $scope not applying to the template.. What I really want to do is have the whole template generated by angular, via ng-repeat, and layers controlled via scope.
from angular-revolution.
Yes, that's true. I suppose, that the idea is to $compile each layer inside the directive ....
from angular-revolution.
Hi Mathew,
I modified your directive a little bit to meet our basic requirements of using variables inside the template being loaded. Hope this help you with your incoming work of making them dynamic... ;)
/*templateUrl: function(element, attrs) {
console.log(attrs.sliderTemplateUrl);
return attrs.sliderTemplateUrl || 'template/slider/slider.tpl.html';
},*/
link: function(scope, element, attrs) {
var hasValuesDefined, trueOrFalse;
scope.templateUrl = attrs.sliderTemplateUrl;
$templateRequest(attrs.sliderTemplateUrl).then(function(html){
var template = angular.element(html);
console.log(template);
element.append(template);
$compile(template)(scope);
});
Best,
Jose
from angular-revolution.
Hey @Karnith or @jiferrero, did either of you make progress on this? I can't seem to follow the changes that @jiferrero made, but I desperately want to use revolution slider with angular.. Im guessing this is not possible at this time
from angular-revolution.
Hi @rossvz ... what do you need to do? We implemented the solution, although it is adapted to what we needed, as described above. You can see working in angular 1.4.x in this link that we are using to test some different elements https://kernstein.org
Because we are using a self signed certificate for testing purposes either chome or firefox will show a warning, you only have to click on advanced and say ok.
Hope it helps you.
from angular-revolution.
@jiferrero essentially I have async data from an API to display product images or videos. I have a service that gets the data, and tried to do do an ng-repeat based on that data for each div, but that seems to fail. It looks like the jQuery plugin needs all the data loaded when it loads? I tried looking into the angular directive but im not sure how to modify it to use my data?
from angular-revolution.
Hi... That's what we are actually doing... And that's why we change the directive to compile the templates and can access its scope to make the interpolation. I'm currently on trip an have no access to my computer, but tomorrow night I will have. So if you want I can send you the directive so you can play with. If you need any help with it, I will be so glad in helping you.
---- Ross van Zyl escribió ----
@jiferrero essentially I have async data from an API to display product images or videos. I have a service that gets the data, and tried to do do an ng-repeat based on that data for each div, but that seems to fail. It looks like the jQuery plugin needs all the data loaded when it loads? I tried looking into the angular directive but im not sure how to modify it to use my data?
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#3 (comment)
from angular-revolution.
@jiferrero that would be great! Perhaps this would be a good PR for this project?
from angular-revolution.
Pretty sure of that... 😉
---- Ross van Zyl escribió ----
@jiferrero that would be great! Perhaps this would be a good PR for this project?
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#3 (comment)
from angular-revolution.
Hi rossvz.... What we did with the directive is changing it as follow, so you can load the template and compile it to add the variables you may need in the scope allowing them to be interpolated. I let you the commented code so you can see what it what changed. You can use it in the same way, but know your template can have any {{expresion}} tha you can interpolate from your controller once the service has load it from the API... Essentially is what we do in the web I gave you the link. The photos, videos or text in the slide template are injected from a REST service and then compile it and shown.
/**
** angular-revolution
** https://github.com/Karnith/angular-revolution
** Version: 1.0.0 - 2015-12-07
** License: MIT
/
angular.module("rev.slider", ["rev.slider.tpls"])
.directive('revSlider', ['$templateRequest', '$compile', '$timeout', function ($templateRequest, $compile, $timeout) {
return {
restrict: 'AE',
transclude: true,
scope: {
sliderType: '@',
sliderLayout: '@',
responsiveLevels: '@',
gridwidth: '@',
gridheight: '@',
autoHeight: '@',
minHeight: '@',
fullScreenOffsetContainer: '@',
fullScreenOffset: '@',
delay: '@',
disableProgressBar: '@',
startDelay: '@',
stopAfterLoops: '@',
stopAtSlide: '@',
viewPort: '@',
lazyType: '@',
dottedOverlay: '@',
shadow: '@',
spinner: '@',
hideAllCaptionAtLilmit: '@',
hideCaptionAtLimit: '@',
hideSliderAtLimit: '@',
debugMode: '@',
extensions: '@',
extensions_suffix: '@extensionssuffix',
fallbacks: '@',
parallax: '@',
revCarousel: '@',
navigation: '@',
jsFileLocation: '@',
visibilityLevels: '@',
hideThumbsOnMobile: '@',
slides: '='
},
/ templateUrl: function(element, attrs) {
console.log(attrs.sliderTemplateUrl);
return attrs.sliderTemplateUrl || 'template/slider/slider.tpl.html';
}, /
link: function(scope, element, attrs) {
var hasValuesDefined, trueOrFalse;
/ scope.templateUrl = attrs.sliderTemplateUrl; **/
$templateRequest(attrs.sliderTemplateUrl).then(function(html){
var template = angular.element(html);
element.append(template);
$compile(template)(scope);
});
trueOrFalse = function(bool) {
if (bool === 'true') {
return true;
} else {
return false;
}
};
hasValuesDefined = function(value) {
if (angular.isDefined(value)) {
return JSON.parse(value);
} else {
return {};
}
};
/** return $templateRequest(attrs.sliderTemplateUrl).then(function(html){
var template = angular.element(html);
element.append(template);
$compile(template)(scope);
var revapi;
revapi = element.show().revolution({
sliderType: scope.sliderType,
sliderLayout: scope.sliderLayout,
responsiveLevels: hasValuesDefined(scope.responsiveLevels),
gridwidth: hasValuesDefined(scope.gridwidth),
gridheight: hasValuesDefined(scope.gridheight),
autoHeight: scope.autoHeight,
minHeight: scope.minHeight,
fullScreenOffsetContainer: scope.fullScreenOffsetContainer,
fullScreenOffset: scope.fullScreenOffset,
delay: scope.delay,
disableProgressBar: scope.disableProgressBar,
startDelay: scope.startDelay,
stopAfterLoops: scope.stopAfterLoops,
stopAtSlide: scope.stopAtSlide,
viewPort: hasValuesDefined(scope.viewPort),
lazyType: scope.lazyType,
dottedOverlay: scope.dottedOverlay,
shadow: scope.shadow,
spinner: scope.spinner,
hideAllCaptionAtLilmit: scope.hideAllCaptionAtLilmit,
hideCaptionAtLimit: scope.hideCaptionAtLimit,
hideSliderAtLimit: scope.hideSliderAtLimit,
debugMode: trueOrFalse(scope.debugMode),
extensions: scope.extensions,
extensions_suffix: scope.extensions_suffix,
fallbacks: hasValuesDefined(scope.fallbacks),
parallax: hasValuesDefined(scope.parallax),
carousel: hasValuesDefined(scope.carousel),
navigation: hasValuesDefined(scope.navigation),
jsFileLocation: scope.jsFileLocation,
visibilityLevels: hasValuesDefined(scope.visibilityLevels),
hideThumbsOnMobile: scope.hideThumbsOnMobile
});
return scope.$on('$destroy', function() {
return revapi.revkill();
});
}); **/
return $timeout(function() {
var revapi;
revapi = element.show().revolution({
sliderType: scope.sliderType,
sliderLayout: scope.sliderLayout,
responsiveLevels: hasValuesDefined(scope.responsiveLevels),
gridwidth: hasValuesDefined(scope.gridwidth),
gridheight: hasValuesDefined(scope.gridheight),
autoHeight: scope.autoHeight,
minHeight: scope.minHeight,
fullScreenOffsetContainer: scope.fullScreenOffsetContainer,
fullScreenOffset: scope.fullScreenOffset,
delay: scope.delay,
disableProgressBar: scope.disableProgressBar,
startDelay: scope.startDelay,
stopAfterLoops: scope.stopAfterLoops,
stopAtSlide: scope.stopAtSlide,
viewPort: hasValuesDefined(scope.viewPort),
lazyType: scope.lazyType,
dottedOverlay: scope.dottedOverlay,
shadow: scope.shadow,
spinner: scope.spinner,
hideAllCaptionAtLilmit: scope.hideAllCaptionAtLilmit,
hideCaptionAtLimit: scope.hideCaptionAtLimit,
hideSliderAtLimit: scope.hideSliderAtLimit,
debugMode: trueOrFalse(scope.debugMode),
extensions: scope.extensions,
extensions_suffix: scope.extensions_suffix,
fallbacks: hasValuesDefined(scope.fallbacks),
parallax: hasValuesDefined(scope.parallax),
carousel: hasValuesDefined(scope.carousel),
navigation: hasValuesDefined(scope.navigation),
jsFileLocation: scope.jsFileLocation,
visibilityLevels: hasValuesDefined(scope.visibilityLevels),
hideThumbsOnMobile: scope.hideThumbsOnMobile
});
return scope.$on('$destroy', function() {
return revapi.revkill();
});
});
}
};
}]);
angular.module("rev.slider.tpls", ["template/slider/slider.tpl.html"]);
angular.module("template/slider/slider.tpl.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put('template/slider/slider.tpl.html',
'
- \n' +
' \n' +
...... [the rest of the template code, although really we don't need it].......
from angular-revolution.
Hello ,
I'm sorry for asking repetitive question, I have an object which contain only images so how can i integrate that object with this Plugin
from angular-revolution.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-revolution.