hy guys,
in an Ionic project I made a ion-list ion-items and these ion-option-buttons:
<ion-item ng-repeat="(id,place) in places" >
<h2>{{place.name}}</h2>
<ion-option-button class="button-positive" href="#/tab/place/{{id}}">
edit
</ion-option-button>
</ion-item>
but href="..." is not working
Thanks for help
I solved the problem:
template:
<ion-option-button class="button-positive" ng-click="goTo('edit-place',{'placeId':id})">
Controller:
$scope.goTo=function (state,params) {
$state.go(state,params);
}
In angularJS, The correct way to use href is
<a ng-href="#/tab/place/{{id}}"></a>
ng-href Doc
Hope it helps :)
Try using This
<h2>{{place.name}}</h2>
<ion-option-button class="button-positive">
<a href="#/tab/place/{{id}}">
edit
</a>
</ion-option-button>
Href attribute is supposed to be use with anchor tag. You can try to wrap ion-option-button with anchor tag or use event like onClick to navigate using javascript code.
Since you're using ui-router you don't need to make a goTo function. Just use ui-sref to load your dynamic state. Also I would try not to use "-" in the state name (editPlace).
<ion-option-button class="button-positive" ui-sref="edit-place({placeId:id})">edit</ion-option-button>
Related
I am working on ionic framework. So I am confused with using ui-sref and href. For example for tabs we use ui-sref as we can have various states all linked to some main (base) url.
eg
.state('dashboard', {
url: "/dashboard",
templateUrl: 'templates/dashboard.html',
controller: 'dashboardCtrl'
})
.state('dashboard.active', {
url: '/active',
views: {
'active': {
templateUrl: 'templates/active.html',
controller: 'ActiveCtrl'
}
}
})
My dashboard page has tabs whish have various various states now if I want to move to a diffrent template from one of these states or templates (eg to active.html)
eg.
//active.html
<li class="item">
<a class="button button-positive" ui-sref="dashboard.editClaim"> Edit Claim
</a>
</li>
or
<li class="item">
<a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
</a>
</li>
here should i use ui-sref or href.
Also editclaim template has tabs should i use ui-sref there and will it work fine because currently that is the problem.
So I am wondering if I have to maintain some state till there. Thank you.
here should i use ui-sref or href.
From docs: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
A directive that binds a link ( tag) to a state. If the state has
an associated URL, the directive will automatically generate & update
the href attribute via the $state.href() method. Clicking the link
will trigger a state transition with optional parameters. Also
middle-clicking, right-clicking, and ctrl-clicking on the link will be
handled natively by the browser.
<a ui-sref="home">Home</a> is converted to:
Home
Use ui-sref if you decided to use ui-router. This is a best practice. You can change in your code associated URL for the same state and you don't need to maintain your links.
Developers rarely use href for example in big lists for better performance to avoid additional watchers, but hope its not your case
<a class="button button-positive" ui-sref="dashboard.editClaim"> Edit Claim
</a>
is going to get convert in:
<a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
</a>
in your browser since ui-sref is just a simple directive provided by angular. For more info:
https://scotch.io/tutorials/3-simple-tips-for-using-ui-router
What's next? You should use ui-sref when using ui-router
When click on the Register link. It will not go to the register.html page. What is the wrong in this.
app.js
.when('/login/:register/', {
templateUrl: 'views/register.html',
controller: 'RegisterController'
});
login.html
<button href="#/login/:register/" class="button button-block button-positive activated">Register</button>
I think you should use anchor tag instead of button. I mean
Register
:register is a parameter in the route.
As you want to use as simple URL remove : from the route.
app.js
.when('/login/register/', {
templateUrl: 'views/register.html',
controller: 'RegisterController'
});
login.html, You need to use anchor if you want to use href
<a ng-href="#/login/register/">Register</a>
OR,
<button ng-click="redirect()">Register</button>
In controller use
$scope.redirect= function(){
$loaction.path('/login/register/')
}
i suggest to use ui router, it uses state instead of url using ui-sref,
if you have time and you need better handling over rouuting, tru ui router.
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?
I am currently trying to add links in my view. I do have links which basically contains html tags as strings.
I tried:
<p data-ng-repeat='i in links' >{$ i.link $}</p>
which basically just deploy in my view : mylink
So I did try:
<p data-ng-repeat='i in links' ><span data-ng-bind-html="i.link"></span></p>
It doesn't work though, any idea how could I achieve this ?
Thanks.
Add the $sce as a dependancy of the module
angular.module('myApp', ['$sce']);
When getting the links
angular.forEach($scope.links, function(value){
value.link = $sce.trustAsHtml(value.link);
});
Using Safe Contextual Escaping (docs.angularjs.org/api/ng/service/$sce) and using trustAs delegate you're telling Angular that this value is safe to use within that context. In this example. $sce.trustAsHtml returns an object that angular can trust is safe to as HTML.
In the first case, you'll actually want to use:
<p data-ng-repeat='i in links' >{{ i.link }}</p>
Double braces, not brace-dollar. In the second case, ng-bind-html will require that you have added "ngSanitize" to your module's dependency list.
angular.module('yourAppNameHere', ['ngSanitize'])
Edit:
If you really do want clickable links on the page, then do pretty much what #sreeramu suggested (Though I'd see if you can't find a way to add a nice description):
<p data-ng-repeat='i in links' ><a ng-href="{{i.link}}">{{i.desc}}</a></p>
(Notice that he suggested using ng-href, instead of href. He's right.)
Insert ngSanitize as a dependency to you app:
angular.module('myApp', ['ngSanitize'])
But before be ensure that you are including the script angular-sanitize.js.
Good luck!
It might be that your links have already got the a tags with it so in this case you do not need to re-add the a tags...
In this case do this...
Add this to you scripts (include acc. to your angular version)
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-
sanitize.min.js"></script>
Add this to your app.js
var app = angular.module('modulename', [ 'ngSanitize']);
And than in your view do this
If it is the div that you want the link to attach to...
<div ng-bind-html="i.link"></div>
The above would give you something as this
<div><a href='your link'></a></div>
I'm facing a problem but I don't know what may cause this.
When routing to some actions, for example when I click a button with the following code piece ..
Html::a('<button class="pull-right btn btn-info btn-lg"><span class="pull-right glyphicon glyphicon-th-large" ></span></button>',['user/create'],
['type'=>'button','align'=>'right']);
.. it routes to the default controller like the homepage!
Other buttons are routing right.
Any one can help what may cause wrong routing or wrong request?
Thanks a lot!
Try ['/user/create'] instead of ['user/create'].
Edit:
Should the URL be routed? If not, try to use user/create.
There are different ways you can use the URL parameter: http://www.yiiframework.com/doc-2.0/yii-helpers-baseurl.html#to%28%29-detail