Why ng-bind-html shows only text without link? - javascript

I am using ng-repeat to display a list. In my data there is a field which contains Url that I need to be displayed as a link in my html page. Please see below screen shots:
My Html:
My rendered page:
I have added angular-sanitize.js script in my page and added dependency for 'ngSanitize' in my main module. But I can't find why the ng-bind-html only showing text without link? Helps are much appreciated.
Suggestion 1 Outcome:
and updated code:

You have to use a hyperlink (<a>)

Related

CKeditor doesn't work properly

I have a problem. I added CKeditor to my website.
Now i have a problem. If i add lines:
<script>
CKEDITOR.replace( 'tresc' );
</script>
In head section on my main page everything works, but if i go to contact or panel page unfortunetly editor doesn't work(name of the textarea is the same). If i add this lines at the end of body section in contant or panel works, but in the main page only one textarea working with editor, rest doesn't. Writing website on includes(my index is not changing and everything in content div is including from other files). Can some1 help me?
Please see: https://docs.ckeditor.com/#!/guide/dev_installation-section-adding-ckeditor-to-your-page
The replace method has to be used below textarea tag.
Your textarea tags need to have unique id and/or name attributes. So that each CKEditor instance knows to which textarea it is assigned. Unique element id's are also a requirement in HTML.
If your textarea tags can't have different names (they can't have same id's), please drop the names and assign fake class to each e.g. 'myeditor' and use replaceAll method: CKEDITOR.replaceAll('myeditor');.
I solve my problem.
I've added class and use another <script></script>. Now everything is working. Thanks j.swiderski for helping me. Best regards.

How to change meta tag content in angularjs single page applications?

I'm developing a single page application using angularjs. I want to change the content of meta tags of the parent page.
I used following codes to do it.
document.getElementsByTagName("META")[5].content = "The title is here";
document.getElementsByTagName("META")[6].content = "This is the description";
document.getElementsByTagName("META")[7].content = document.getElementById("ImgResult").src;
This code is working and I observed it in console. But if view the source of the page, The meta tags are not changed.
Please help me to solve this.
When you are viewing the "source code", you are seeing the html files as they were when initially fetched from the server.
So any changes at all will never be reflected there. If you do "inspect element" instead, that will show updated content.
For example many angular applications use ui router or ng-router to display views. If you view 'page source' on these pages, you will only see the element that will be replaced by the view, and none of the actual html from the view.
Source code of page is static document, it will not persist your changes, but viewing DOM will show you that tags are indeed changed, you can verify it by
//open chrome(or whatever) dev tools, try it right now, in this website
//write below lines in console
document.getElementsByTagName("META")[0].content = "The title is here";
console.log(document.getElementsByTagName("META")[0]);
//switch to Elements tab, find first meta, value is changed
Viewing source code of page is not that much useful, as many web pages changes its contents by jquery or angular

AngularJS ng-view, ng-click and routerProvider not working together

I've been scratching my head for some time over this puzzle. I've been trying to load an external file into an ng-view (no problems here). And in that partial file I have text that get swapped for an input field when you click "Edit title", but this only works when all code is included in the same file.
If you take a look at this Plunker http://plnkr.co/edit/cgUGOKVzWKNWugqrFCbJ you'll see what I mean.
I would appreciate if you could point me in a direction that could solve this issue for me.
Thanks!
The "#" in the hrefs are probably making angular render the html and the controller again.
Change them as below and it should work:
Edit title

AngularJS - Overlay admin layout?

I'm here for a little question about angularJS...
Currently at work we are working on an app that need an "overlay" admin style panel.
Lets take this exemple :
http://olivierbossel.com/others/angularJS-overlay.jpg
In the first part, the url is "myapp.com/#/works". To display this I have currently configured my $routeProvider.when('/works', { templateUrl: ... etc... And I have in my template the ng-view directive that handle the load and the display of the template. Ok for this part...
My question is :
How to display a content in another part of the page like in the second part of the picture where the url is "myapp.com/#/admin" ?
In this case, the admin template has to be displayed in an overlay style element...
Hope somebody has an answer for me, that will be extremely helpfull...
Thanks in advance !
See you !
Best regard
Olivier
Take a look at http://angular-ui.github.com/#directives-modal. It basically shows/hides the modal depending on an ng-model variable.
Edit: Here's an example doing what you want: Open a modal on the same page depending on the routeParams: http://plnkr.co/edit/DOPmBT?p=preview

How to use same div tag with different content in HTML?

I want to use same div tag for different page displaying using html. how to use it
Ex:<div id ="name"> if{page1}else{page2}</div> is there any possible using if in html or give different solution plz.
when user clicks different tab the different page need to appear i used different div but click different tab it shows some empty space with the page2 i think that is page1 space.
Given that a page might have ids #page1 and #page2 and the <div> has an id of #brian
you could use jquery:
$('#page1 #brian').html(some_html_here);
$('#page2 #brian').html(some_html_here);
This example may aid you - http://jsfiddle.net/wQCDR/
Alex
If you don't want to use PHP in your HTML code you can use SSI (server-side include). Basically, you can include html files within other html files. Here's a link to read more:
http://httpd.apache.org/docs/1.3/howto/ssi.html
Cheers
you can don this usign javascript
get url first and according to that write content to particular div using
document.getElementById('one').innerHTML = "Content";

Categories