how to use translate with directive (JSON keys are not getting translated)

[vkkmehra]

I am using the exact versions of the following:

• Browser: [Chome] Version: 67.0.3396.87
• AngularJS: 1.5.8
• Angular Bootstrap: 3.3.7
• Angular UI Tour: 0.9.2

I have installed this library via: (Bower)

I have observed the following behavior:

in my en.json file i have defined key as

"agentTour": {
    "step1Title": "Branch Office"
}

I have even tried by using a variable in my controller as
vm.test = 1;

and using it in the directive as tour-step tour-step-title="vm.test" or tour-step tour-step-title="{{vm.test}}"

but the variables print as it is if I use {{}} then nothing shoes up.

This is how I expected it to behave:
I expected it to replace the step1Title with Branch Office

Here is my tour config, and all related step configs:

var tourPromise = uiTourService.getTour().start();

<div ui-tour ui-tour-backdrop="true" ui-tour-scroll-into-view="true" ui-tour-append-to-body="true" ui-tour-on-shown="vm.tourStart()" on-end="vm.tourEnd()">

                <div class='row' id='agentStep1' ng-hide="vm.alreadyParent" id="mainMenu" tour-step tour-step-title="{{vm.tourTitle}}" tour-step-content="Navigate the site using this menu." tour-step-order="0" tour-step-placement="top" tour-step-backdrop="true">
                    <fe-lib-check-box class="col-xs-12 col-sm-3 mt-20" placeholder="Agent.chkAgentBranchOffice" data-ng-model="vm.agent.is_branch_office" data-ng-disabled="vm.agent.TotalBranchOffices>0">
                    </fe-lib-check-box>

                    <fe-lib-typeahead on-item-selected="vm.changeValues" class="col-xs-12 col-sm-8" data-ng-model="vm.agentParentAgent" text-field="agent_name" api-route="{{vm.routeOfParentAgent}}" display-properties=" agent_name " placeholder="{{'Agent.dpdAgentParentAgent' | translate}}" readonly="!vm.agent.is_branch_office" required="vm.agent.is_branch_office">
                    </fe-lib-typeahead>
                </div>

Additional notes/code:

Also if you can give me an example to define tour steps in the controller as it is also not working for me

[benmarch]

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.