change template to be dynamic

[Karnith]

Template is currently static. Template needs to be revised so that it can be built by angular object with ng-repeat, etc..

[jiferrero]

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

[Karnith]

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.

[jiferrero]

Yes, that's true. I suppose, that the idea is to $compile each layer inside the directive ....

[jiferrero]

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

[rossvz]

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

[jiferrero]

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.

[rossvz]

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

[jiferrero]

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)

[rossvz]

@jiferrero that would be great! Perhaps this would be a good PR for this project?

[jiferrero]

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)

[jiferrero]

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

[itskrsna]

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