I'm trying to route to a reset page from the login page of the webapp i'm working on but nothing happens when I click on "forgot Password". when I replace #/login with #/reset in the address bar the view changes to the reset page so I know the route is setup correctly. Any idea what i'm doing wrong?
My code:
in my login template:
<a href="#" class="forgotPassword" ng-click="forgotPassword()">Forgot Password?
In my login controller:
$scope.forgotPassword = function(){
$location.path('/reset');
}
whenever using anchor tag and want to redirect by using ng-click, do not use href
for you remove the href
now your template look like this..
<a class="forgotPassword" ng-click="forgotPassword()">Forgot Password?
Have you tried to redirect your view with the "href" tag instead of the "ng-click" function?
Forgot Password?
Related
In angular 2+
If I'm using href to redirect then it reloads the whole
page.
In .ts
this.htmlText = 'The validation window for Innovator Mind nominations is open now. Last date to review is 2020-Jan-25';
in HTML,
<div [innerHTML]="htmlText "></div>
If I'm using routerlink to redirect then routerlink does not
get render in html.
In .ts
this.htmlText = 'The validation window for <a routerLink=\"http://localhost/nomination/">Innovator Mind</a> nominations is open now. Last date to review is 2020-Jan-25';
in HTML,
<div [innerHTML]="htmlText"></div>
So how to achieve the route the page without reloading the page?
add in constructor.
private router: Router
Use click event for change url by ts ->
.ts:
html='<a value="myRoute">link</a>';
changeRoute(value){
let myRoute=value.target.attributes.value.value;
if(myRoute){
this.router.navigate([ myRoute ]);
}
}
.html :
<div (click)='changeRoute($event)' [innerHTML]="html"> </div>
i am working on an app with Meteor that requires social shares. So I want to implement a social share on the single-post page.
I so I have this registered helper for facebook share:
Template.registerHelper('shareOnFacebookLink', function() {
return 'https://www.facebook.com/sharer/sharer.php?&u=' + window.location.href;
});
and in the template, I have this :
<a href="{{shareOnFacebookLink}}" target="_blank" class="btn btn-facebook">
<i class="fa fa-facebook"></i>
</a>
The problem is that when i navigate from the homepage to the single-post (where the registered helper is needed), the window.location.href still shows the href of the previous page until I reload the the single-post page.
What i want is how can I make the window.location.href get the href of the single-question page as soon as I land on it without having to refresh it?
Thanks all
You can try to use Meteor.Router.path() to get your current path.
Hey guys I am pretty new to Angular.
Users can edit profile settings in profileSettings page.
I have the following on my profile template:
<div>{{ user.name }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Name</strong></a>
...more code...
<div>{{ user.description }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Description</strong></a>
I want them to be able to click on the edit link that takes them to the Settingsprofile template. However I want when the new template renders to automatically scroll to the relevant field.
So if they click edit link for name, they are taken to the profileSettings template and automatically scrolled to edit name field. If they click the edit description link then they are also redirected to profileSettings page but automatically scrolled to edit description field.
Is there an easy way to do this with Angualar/ui-sref?
Use the optional onEnter
callback which will be called when profileSettings state becomes active to render those two functions :
$location.hash('hashValue')
will take to the element with id="hashValue" url like : /profileSettings.html#hashValue
$anchorScroll
will scrolls to that element
So your code may look like this:
$stateProvider.state('profileSettings', {
url: '/settings',
template: 'settings.html',
controller: 'ProfileSettingsCtrl',
onEnter: function(){
$location.hash('hashValue');
$anchorScroll();
}
});
Note: Remember to add $location and $anchorScrollto your dependencies.
Hey guys I am pretty new to Angular.
Users can edit profile settings in profileSettings page.
I have the following on my profile template:
<div>{{ user.name }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Name</strong></a>
...more code...
<div>{{ user.description }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Description</strong></a>
I want them to be able to click on the edit link that takes them to the Settingsprofile template. However I want when the new template renders to automatically scroll to the relevant field.
So if they click edit link for name, they are taken to the profileSettings template and automatically scrolled to edit name field. If they click the edit description link then they are also redirected to profileSettings page but automatically scrolled to edit description field.
Is there an easy way to do this with Angualar/ui-sref?
Use the optional onEnter
callback which will be called when profileSettings state becomes active to render those two functions :
$location.hash('hashValue')
will take to the element with id="hashValue" url like : /profileSettings.html#hashValue
$anchorScroll
will scrolls to that element
So your code may look like this:
$stateProvider.state('profileSettings', {
url: '/settings',
template: 'settings.html',
controller: 'ProfileSettingsCtrl',
onEnter: function(){
$location.hash('hashValue');
$anchorScroll();
}
});
Note: Remember to add $location and $anchorScrollto your dependencies.
I have a angularjs app with a controller and a partial wired up..
In my controller I have a array of links..
$scope.links = ['http://www.example.com/1','http://www.example.com/2'];
In my partial, I have the following code..
<div ng-repeat="link in links">
Link
</div>
This does not seem to work.. I am running this via a NodeJS app locally..and so my URLs always end up as
http://dev-server.local:3000/"http://www.example.com"
Can anyone please help me figure out how I can add a hyperlink from my controller directly into my partial template and make Angular not append the page URL..
You have to explicitly trust extern URL:s. Look at the documentation for $sce.
In you controller, make sure you have a dependency to $sce, then in create a method that trust the external url.
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
}
In your view you can reference this method and pass in the url with
<a ng-href="{{ trustUrl(item) }}">Click me!</a>
instead of
href={{link}}
use
ng-href={{link}}