Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to dynamically add (virtual) steps with ng-repeat #62

Open
pascal08 opened this issue Feb 1, 2016 · 3 comments
Open

Unable to dynamically add (virtual) steps with ng-repeat #62

pascal08 opened this issue Feb 1, 2016 · 3 comments

Comments

@pascal08
Copy link

pascal08 commented Feb 1, 2016

TourSteps (demoTour.json)

[
    {
        "textKey": "test1",
        "placement": "bottom",
        "element": "#element1"
    },
    {
        "textKey": "test2",
        "placement": "bottom",
        "element": "#element2"
    },
    {
        "textKey": "test3",
        "placement": "bottom",
        "element": "#element3"
    }
]

Directive (demoTourDirective.js)

[...]
        restrict: 'A',
        scope: true,
        template: $templateCache.get('demoTourDirective.html'),

        link: function (scope) {

            scope.currentStep = 0;

            scope.tourSteps = [];

           // retrieves demoTour.json
            DemoTourService.get().then(function (tourSteps) {
                scope.tourSteps = tourSteps;
            });
        }
[...]

Template (demoTourDirective.html)

[...]
<tour step="currentStep" post-step="stepComplete()">
    <virtual-step data-ng-repeat="step in tourSteps"
        data-ng-attr-tourtip="{{ step.textKey | translate }}"
        data-ng-attr-tourtip-step="{{ $index }}"
        data-ng-attr-tourtip-placement="{{ step.placement || undefined }}"
        data-ng-attr-tourtip-element="{{ step.element || undefined }}">
    </virtual-step>
</tour>
[...]

I've tried to:

  • move ng-repeat to a parent wrapper: doesn't work
  • remove data-ng-attr- prefix: doesn't work
  • change step order (hardcoded and by $index): doesn't work
  • add a 'hardcoded' step after the ng-repeat loop: doesn't work
  • add a 'hardcoded' step before the ng-repeat: tour works ! (yet I don't want any unnecessary steps in my template and besides that it does not work trying to skip this step by default)

It really seems like angular-tour is consuming the template before the ng-repeat loops is compiled by angular. Though, when I place a hardcoded step in front of the ng-repeat loop it works.

Some other possible solutions have crossed my mind, but most of them are obscure and really not worth implementing since I would be better of hardcoding my steps instead.

@mattifh
Copy link

mattifh commented Dec 26, 2016

Have you ever found a way to make your ng-repeat to work? I am facing the same issue.

@mattifh
Copy link

mattifh commented Jan 3, 2017

@DaftMonk @pascal08 any input you can provide is highly appreciated. Let me know if this is not even possible.

@pascal08
Copy link
Author

pascal08 commented Jan 4, 2017

It is possible by adding the steps before the loop, as I mentioned. I haven't found another way to get this to work sadly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants