I have created an ionic android app that reads data from the database. One of the fields in the database is the website url. I'm doing data binding where I can display the url using: {{accommodation.website}}. I want to be able to use this to display an external web page. Unfortunately this is not working using this code:
<a ng-href="#" target="_self" onclick="window.open('{{accommodation.website}}','_self','location=yes')" class="button button-positive">Website</a><p>{{accommodation.website}}</p>
and as a result it displays :
http://localhost:8100/%7B%7Baccommodation.website%7D%7D
Cannot GET /%7B%7Baccommodation.website%7D%7D
But when I use:
<a ng-href="#" target="_self" onclick="window.open('http://www.w3schools.com/angular/ng_ng-href.asp','_self','location=yes')" class="button button-positive">Website</a><p>{{accommodation.website}}</p>
It works fine on android phone. Instead of hard coding the url, I want to use data binding as I am working with ion-list. I spent all day trying to fix this. Please help.
Hope this will help you, for detail, go to Nic's Blog, and check out comments. Regards!
<a ng-href="{{accommodation.website}}" target="_self" onclick="window.open(this.href,'_self','location=yes')" class="button button-positive">Website</a><p>{{accommodation.website}}</p>
First, use ng-click, not onclick, but that is beside the point since you should just be using ng-href="{{accommodation.website}}"
Related
I am using JHipster to develop my project with Angular1.
I want to hide some buttons etc. for security.
'*jhiHasAnyAuthority'
command works for Angular2+ project but i am using Angular1 and i don't know how to hide elements according to authority.
Also i saw in navbar.html
has-authority="ROLE_ADMIN"
are used by default to hide admin menu. When i try to use same command for my entity, nothing changes.
There is a similar question as yours which was nicely answered here
I myself have used both has-authority="" and has-any-authority="" and as an example of your query on the navbar.html, let's assume you have created an entity named Manager, this will be only visible after login from a ROLE_MANAGER or ROLE_ADMIN.
<li ui-sref-active="active" has-any-authority="ROLE_MANAGER, ROLE_ADMIN">
<a ui-sref="manage" ng-click="vm.collapseNavbar()">
<span class="glyphicon glyphicon-flash"></span>
<span class="hidden-sm" data-translate="global.menu.entities.manager">Manager</span>
</a>
</li>
Note: ROLE_MANAGER is a customer role added by me and not by the default jhipster generator.
I installed fotorama plug in wordpress here :
http://62.210.136.123/wordpress/
I would like to add an vertical sign to the gallery so as to make a link to the bottom part of the page exactly like this
http://www.amillarah.com/
I saw the source code below
<span class="control control--down js-jumpto-main"></span>
but i don't know how to implement control--down on the plugin wordpress
Please help me
Many thanks
Rodolphe CATTA
Ok, so in our 'innovation lab', there is currently a push to use Ionic, an hybrid app framework built on top of Cordova for native access and angularJS for the ‘web code’.
There are also some projects which are pure mobile web, using Angular + bootstrap for responsive design for example.
The thing is some projects coming up will need to have both a mobile web site and native apps (ionic hybrid). Most features and screens will be the same, sharing back end and most of the UI but there still will be some difference.
So my question is; How to architecture a project so that it can be both an ionic project and a normal angular website with 2 different deployment approaches. Most of the code being reused but some views for the mobile website and some views for the hybrid app (using more native components and conventions), maybe some routing differences as well.
Is that even a good idea?
And in the shared code, is there a simple way to know in which case you are? some IF, some directives inactive outside of their context, etc.
It feels like there is some sort of missing link i may be unaware of.
Thanks in advance.
I'm working on this same problem. The approach I'm taking is to use separate templates, and when possible, key CSS off the device detection classes ionic adds to the body tag.
Desktop version (default)
.your-style
Mobile Version
.platform-webview .your-style {...}
.platform-cordova .your-style {...}
There's a repository on on Github that might offer some guidance.
https://github.com/jonathanwax/jw-ionic-desktop
To quote from of the source code from his project, you would create a folder for each view with the mobile version of the template.
For example your bootstrap desktop version of template.html could look like this:
<div class="container">
<h1 class="text-danger" id="helpHeader">Help Needed?</h1>
<li ng-repeat="help in vm.service.data"> {{ help.title }} - {{ help.content }}</li>
</ul>
<pre dir="ltr">HelpController: {{vm|json}}</pre>
And a ionic mobile version of this same template could be located at mobile/template.html
<ion-view view-title="Help">
<ion-content>
<ion-list>
<ion-item ng-repeat="help in vm.service.data">
{{ help.title }} - {{ help.content }}
</ion-item>
</ion-list>
</ion-content>
You could create a conditional to work with your router to serve the mobile template if you're in a cordova/mobile environment. I feel like maintaining two templates could be development hell. Which is why ionic snubs its nose at developing for the desktop--this is hard work! And prone to bugs. It's pretty much a flytrap ( ya know for bugs :) ).
We could try writing templates with conditionals, but I suspect different files may have less overhead.
A conditional approach to templating:
Test for mobile environment
var isMobile = ionic.Platform.isWebView();
In the template or view html:
<{{isMobile ? 'ion-container' : ' div class="container"'}}>
Or a use an ng-switch:
<div ng-switch="expression">
<div ng-switch-when="isMobile">
CODE FOR MOBILE HERE
</div>
<div ng-switch-default>
CODE FOR DESKTOP HERE
</div>
</div>
Depending on your application, you can get away with using ionic directives for most of your desktop application. You can sprinkle in desktop styling when needed. There's really not a huge amount of code that would actually need to be served by a different mobile/desktop template.
I am new in angular js. In the last few days i am trying to log in into my app using google account. Using html google+ button i have successfully done that using javascript. Bellow showing part of implemented code that is on simple (html+javascript).
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="389760997134-uredjv5rat0k3vsjaqlt7nn4pbgtqrat.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.me">
</span>
</span>
When trying that in angular i dont have any idea what what to do. Please give mw some idea what to do. I did not find anything clear over the internet. Any tutorial link or any partial project.
Even if I set the target to _self in CKEDitor. It is putting this into every link, it seems to be the default and override any other setting the user picks. In CKEDitor source view it will not show _target="blank" but when the node is published the link turns into this.
a link looks like this
<a target="_blank" rel="nofollow" href="#" style="color: rgb(85, 26, 139); text-decoration: none;">submitting an online application</a>
http://screencast.com/t/BEbaMw8SZ
I downloaded the latest CKEditor Full Package and am using it with the Drupal module.
UPDATE: I changed to TINYMCE and am getting the same issue so this is an issue with Drupal not CKEditor
Are you using any module that alters links like External Links, External Links Filter etc? Check that.
The same was happening to me. My problem was with Twitter module.
I've solved it unchecking the Twitter link converter filter in the format that was experimenting this problem (Filtered HTML in my case). This filter was adding "target=_blank" to all of my links.
Hope it helps.
You may have this set in the format you have set for the wysiwyg editors. Check admin/config/content/formats/wysiwyg_editor and make sure that in 'Limit allowed HTML tags' the 'Add rel="nofollow" to all links' option is not checked.