change template to be dynamic

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:

**{{ $scope.text }} <---------------------- Somethign in this way**

Karnith commented 8 years ago

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 commented 8 years ago

Yes, that's true. I suppose, that the idea is to $compile each layer inside the directive ....
jiferrero commented 8 years ago
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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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: https://github.com/Karnith/angular-revolution/issues/3#issuecomment-248915467

rossvz commented 8 years ago

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

jiferrero commented 8 years ago

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: https://github.com/Karnith/angular-revolution/issues/3#issuecomment-248962129
jiferrero commented 8 years ago
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', '
itskrsna commented 7 years ago

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
- © Githubissues.
- Githubissues is a development platform for aggregating issues.

Karnith / angular-revolution

change template to be dynamic #3