Comments (1)
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.
Related Issues (20)
- Not Organised Tour HOT 1
- Button Next Doesnt Work HOT 1
- How to use UI-TOUR with angular 4 and Typescript HOT 1
- probleme with TourConfigProvider.enableNavigationInterceptors(); HOT 1
- Keyboard hotkeys are not debounced, resulting in multiple steps shown at once HOT 1
- How to get tour name HOT 2
- Issue: No component factory found for PopoverContainerComponent HOT 1
- Importing with ES6/Webpack producing error: "WARNING: Tried to load angular more than once." HOT 6
- Unable to block navigation using Tab (keyboard) HOT 3
- Show the current step, don't go to next step unless custom condition met HOT 3
- Element does not get highlighted in multi page tour if the location of the element on new page is same as previous step. HOT 3
- Option to make the highlighted area unclickable HOT 2
- Popup not positioned properly HOT 3
- Add bounce for useHotkeys HOT 1
- AngularJs or Angular???? HOT 1
- Incompatibility with browserify HOT 1
- popover placement not working correctly HOT 2
- Can't manage to create my first tour HOT 3
- Usage Enquiry HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-ui-tour.