First, let me show the piece of pseudo-code to illustrate functionality I am trying to achieve
<a data-ng-href="{{getPath('InsuredProfileSummary',{insuredId:insured.insuredId})}}">Summary</a>
Basically, I have a routes defined so that I can refer to them by name, for example
{
name:'InsuredProfileSummary',
url: '/insureds/:insuredId/profile/summary',
config: {
templateUrl: 'app/insured/profile/summary/inProfileSummary.html',
reloadOnSearch: false,
settings:{}
}
}
and I have a service that, given the route, builds the url. So in my example it would replace insuredId with the value, and one would get correct url to the insured profile. This works fine in controller, such as this code
$scope.closeEditModal(vm.insured);
var summaryPath = routesSvc.getPath("InsuredProfileSummary", { insuredId: vm.insured.insuredId });
$location.path(summaryPath);
My question is how would one achieve this binding in html template. Is there a native way to bind result of a function to a value of the attribute, or do I have to write my own directive?
Ok, I had an error, I was missing a "#" in the path, that is why the code did not work.
don't see an issue here.
http://jsfiddle.net/STEVER/2YkeH/
$scope.genUrl = function(){
return 'http://js4.it'
}
Probably I didn't get the idea of the question.
If you want to update it asynchronously it's better to bind a model -
http://jsfiddle.net/STEVER/2YkeH/6/
Related
I was wondering if it was possible with AngularJS to do something like this :
I currently have a route with a first parameter called 'resource' that can be "device" or "group". There is a second parameter called 'id' but it doesn't matter. With the following code the route accepts anything as first parameter :
.when("/templates/:resource/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
It makes me check in the controller if the value of the first parameter is either 'device' or 'group'. I would like to get rid of this verification part without creating two routes if possible :
.when("/templates/group/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
.when("/templates/device/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So my question is, is it possible, using ONE route, to have several urls ? Something like this for instance :
.when("/templates/('device'|'group')/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So I don't have to check the value of the parameter afterwards in the controller myself using
if([('group', 'device'].includes($routeParams.resource))...
Do you know if it's possible ? Or a similar way to do it?
Best regards,
You can't do what you want. If you want to use ui-router you can pull it off but AngularJS ngRoute does not give you the ability to use regexes, or bind route parameters to types. If you are willing to switch to ui-router I can give you an example of how to do what you want.
I am willing to switch to ui-router if it can help me achieve what I want to do.
Also, if it supports types it's nice as I have parameters that must be integers. I am going to have a look at some examples.
If you have any example with regexes It would be nice !
Consider a certain route let's say myapp\profile
which has two modes (buyer/seller)
What i would like to achieve is:
keep the same route url for both modes
Alternate the view with different HTML files (lets say buyer.html, seller.html), of course each view has it's view model.
Sharing some logic between the two modes.
I would like to have a controller/logic to each mode
What i already considered:
Thought about using ui-router's sub states, but I dont want to change the url.
Thought about creating this 'profile' route and while navigating to it, figure the mode (buyer/seller), and then $state.go to a new state (but again, i would like to keep same route name at the end so it's not ok)
Ideally thought i could navigate to my shared controller and then render the correct view and controller, but this idea kinda messed up me.
Could you share what is a clean way of doing this?
most use cases
Normally, in order to dynamically select a template for a state, you can use a function:
state = {
.....
templateUrl: function($stateParams){
if ($stateParams.isThis === true)
return 'this.html'
else
return 'that.html'
}
}
but...
Unfortunately you can't pass other injectables to the templateUrl function. UI.Router only passes $stateParams. You don't want to alter the URL in anyway so you can't use this.
when you need to inject more than $stateParams
But you can leverage templateProvider instead. With this feature, you can pass a service to your templateProvider function to determine if your user is a buyer or seller. You'll also want to use UI.Router's $templateFactory service to easily pull and cache your template.
state = {
....
templateProvider: function($templateFactory, profileService){
var url = profileService.isBuyer ? 'buyer.html' : 'seller.html';
return $templateFactory.fromUrl(url);
}
}
Here it is working in your plunkr - http://plnkr.co/edit/0gLBJlQrNPUNtkqWNrZm?p=preview
Docs:
https://github.com/angular-ui/ui-router/wiki#templates
http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$templateFactory
I am trying to get query strings to work in my Angular setup, but it is behaving weirdly.
When i go to a URL like this:
http://localhost:3000/?query=test
The URL changes and removes anything after the '=' to end up with:
http://localhost:3000/?query
Has anyone had this problem before?
I am currently using Angular UI Router with defined states and HTML 5 mode. I have also tried specifying the query parameter in the route as below:
.state('home', {
url: '/?referrer',
templateUrl: 'app/views/home/home.html',
controller: 'mainController'
})
UPDATED........
OK. In my controller i had this:
var referrerURL = $location.search('referrer');
Removing this, fixes the issue. Why would this cause the problem?
For $location.search() method, you should use it like this:
$location.search('key','value').
If you don't set the value, it would be "true" by default.
More information here
Thanks for all your input.
I fixed this by changing my controller to use:
var referrerURL = $location.search().referrer;
I created routes below, the story/new doesn't show it's story-new.html template. It always go to story-view.html because I got dynamic :storyID so new consider as a dynamic name.
How to combine them so /new will route to the story-new.html or I got wrong with my route structure?
$routeProvider.when('/story/new', {
templateUrl: 'js/modules/story-new/story-new.html'
});
$routeProvider.when('/story/:storyID', {
templateUrl: 'js/modules/story-view/story-view.html'
});
I'm unsure this works, but switching them around could solve your problem.
Check the following plunker
http://plnkr.co/edit/pgQu8nwGYrOQusZnThUy?p=preview
Let me know if anything
I'm trying to redirect to another route using:
$location.path("/route");
But for some reason it is not working. I did an auto-complete widget using jQuery-UI and I'm calling a function from the scope once the user selects an option. I debugged it and it enters the function but it is never redirected to the other route. It only changes the route when I press a key.
I think it is kind of strange but I haven't figured out how to solve this. I used
window.location = "#/route";
and it works but I want to use the path() function.
Does anybody have any idea why this is happening?
With an example of the not-working code, it will be easy to answer this question, but with this information the best that I can think is that you are calling the $location.path outside of the AngularJS digest.
Try doing this on the directive scope.$apply(function() { $location.path("/route"); });
Don't forget to inject $location into controller.
Assuming you're not using html5 routing, try $location.path("route").
This will redirect your browser to #/route which might be what you want.
If you need to redirect out of your angular application use $window.location. That was my case; hopefully someone will find it useful.
Check your routing method:
if your routing state is like this
.state('app.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'templates/register.html',
}
}
})
then you should use
$location.path("/app/register");
It is hard to say without knowing your code. My best guess is that the onchange event is not firing when you change your textbox value from JavaScript code.
There are two ways for this to work; the first is to call onchange by yourself, and the second is to wait for the textbox to lose focus.
Check this question; same issue, different framework.