Assuming i am using this in my controller
var messagesRef = firebase.database().ref().child("messages");
$scope.messages = $firebaseArray(messagesRef);
And in my html is
<li ng-repeat="message in messages">
<p>{{ message.user }}</p>
<p>{{ message.text }}</p>
<button href="{{ message.weblink }}">OPEN THIS LINK</button>
That {{website.weblink}} for example is www.google.com from my firebase database.
How can i make that button work to open www.google.com using that button because it is not working .
To summarize, <a ng-href=""> should be used instead of <button href="">.
Using Angular markup like {{hash}} in an href attribute will make the
link go to the wrong URL if the user clicks it before Angular has a
chance to replace the {{hash}} markup with its value. Until Angular
replaces the markup the link will be broken and will most likely
return a 404 error. The ngHref directive solves this problem. - ngHref
Related
I'm building a mobile app with Ionic using AngularJS.
In some of the views I would like to bind HTML code having multiple links, but somehow its not working on mobile.
In the browser it works just perfectly, but on mobile the link can not be clicked.
Text I would like to bind:
"Some text http://www.test.com"
My code in HTML:
<p ng-bind-html="testDetails"></p>
$sanitize is available, ngSanitize has been added as a dependency
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
var appControllers = angular.module('starter.controllers', ['ngSanitize']); // Use for all controller of application.
Any idea?
Looks I've found a solution.
Somehow simple <a> tags with href attribute does not seem to be working on mobile with ng-bind-html.
Instead, I used:
<a href="" onClick="window.open('http://www.test.com', '_system', 'location=yes')"
target="_blank">http://www.test.com</a>
This just works perfectly, but it was necessary to bypass $sanitize in ng-bind-html by explicitly trusting the dangerous value (See AngularJS documentation).
https://docs.angularjs.org/api/ngSanitize/service/$sanitize
In Controller:
$scope.testDetails = '<a href="" onClick="window.open('http://www.test.com', '_system', 'location=yes')"
target="_blank">http://www.test.com</a>'
$scope.deliberatelyTrustDangerousSnippet = function(sniptext) {
return $sce.trustAsHtml(sniptext);
};
In HTML view:
<p ng-bind-html='deliberatelyTrustDangerousSnippet(testDetails)'></p>
Also I've found a good filter to do this work, if the data is received with simple <a href="">attributes:
https://gist.github.com/rewonc/e53ad3a9d6ca704d402e
I'm using AngularJS linky filter to make links on a snippet, and it works great, but I want to make call a custom function before executing the url.
So my question is, how can i set a ng-click attribute with linky filter ?
Hope it makes sense?
my code looks like:
<div class="item" href="#" ng-repeat="message in messages">
<p class="message" ng-bind-html="message.message | linky:'_blank':open(url)"></p>
</div>
Following on from gtlambert's comment, it should work. I've used it before. If you add the following, it will run the alert first, and the proceed to follow the link:
HTML
<p class="message" ng-bind-html="message.message | linky:'_blank':open(url)" ng-click="alertFunc()"></p>
</div>
JS
$scope.alertFunc = function() {
alert("doSomething");
}
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.
I am trying to render a directive and have it properly displayed in HTML with AngularJS. I have a service that takes care of displaying warning messages to the users. Per controller I can call this service and set a message I want to be displayed. Now one of those messages is supposed to include a link. However as I am using the Ionic framework I need to use a directive to accomplish exactly that.
HTML:
<div class="bar bar-loading bar-assertive top-bar">
| {{ message }}
</div>
JS:
$scope.message = "Please visit this link: <a ui-sref='app.settings.profile-show'>Open me.</a>"
However the message is not properly output in the html. If I use the following I get the html, but the directive is not evaluated:
<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="message"></div>
How would I accomplish something like this? Thank you.
I am not sure about Ionic framework, But this is my way to render HTML content. Use $sce.trustAsHtml(html) to render text as html. Your code will look something like this.
// ...
app.controller('yourCtrl', function ($scope,$sce) {
$scope.message = "Please visit this link: <a ui sref='app.settings.profile-show'>Open me.</a>";
$scope.renderHTML = function(html_code){
return $sce.trustAsHtml(html_code);
};
}
html
<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="renderHTML(message)"></div>
<!-- or this way? -->
<div class="bar bar-loading bar-assertive top-bar">
| {{ renderHTML(message) }}
</div>
<!-- not sure about second option, but either should work -->
Hope it helped!
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.