how to use translate with directive (JSON keys are not getting translated) about angular-ui-tour HOT 1 OPEN

Hey @vkkmehra, sorry for the very long delay. There are a two scenarios to try here:

The first is using the tour-step directive with the tour-step-title attribute. I can confirm that using an interpolated value does work using AUIT version 0.9.2. Here is the code I am using for my testing step:

// controller
$scope.titleTest = 'Hello!';

// template
<div tour-step=""
        tour-step-title="{{testTitle}}"
        tour-step-content="Testing interpolated title"
        tour-step-order="27"
        tour-step-backdrop="true"
        tour-step-append-to-body="false"
        tour-step-placement="top">
        Title Test
    </div>

And the step title does appear as "Hello!".

Important note: The interpolated value must have loaded before the step is displayed. This means that if your translations load asynchronously, be sure they are done loading and Angular digests before displaying the tour step.

The other scenario is using the TourStepService (directly or indirectly) to create steps. If you go this route, interpolation will not work (by design). Again, you will have to wait until your translations load before creating/updating the step. I am using this pattern for a personal app; it isn't public, but here are some code samples:

// controller

// first create a detached tour (you can also use a tour created by the `ui-tour` directive, 
// just get a reference to it using the uiTourService)
const tour = uiTourService.createDetachedTour('myTour', tourOptions);

// then you can create steps for it...
locale.ready().then(() => {
  tour.createStep({
    title: locale.getString('myTour.step1.title'),
    content: locale.getString('myTour.step1.content')
  });
});

$scope.startTour = () => {
  // add some code to ensure the steps have been created
  tour.startAt(0);
}

Please let me know if you are still having trouble with this. And again, I'm sorry for taking so long to get back to you. I just released a new version (0.9.4) that is a smaller bundle and fixes some positioning issues, by the way.

from angular-ui-tour.