Angularjs - Retrieve html of page given a link - javascript

How can I get html-code of a webpage from an angular directive?
in my example I have an html code:
<div class="modal-body" data-ng-bind-html="myHTML">
</div>
I want to place inside the div the content of another page! In my directive I do something like:
$rootScope.myHTML = link;
Where link should contains the whole html of the page! If myHtml="http://www.google.com", how can I retrieve the content of 'link'?

It sounds like you really just want to apply the external site inside your view, and then you should just link it in an iframe.
<iframe src="http://www.google.com"></iframe>

you can directly insert all the html of directive in html it self only. In your parent html you can insert directive.html like
<directive></directive>

Related

How to embed a class from one file to another?

Is there a way to embed a class from another page in my site?
Lets say I have this code in the page "index.html"
<div class="cls1">
content of div...
</div>
and I want to embed it to another page "anotherpage.html" in my site.
So I do:
<iframe src"?"></iframe>
What should i put instead the ?
note
I want to take from the first file only a divs with the same class
You can separate your html to two files, and then add iframe to another file.
First file:
<div class="something">
Tralala
</div>
Second File:
<iframe src="/path/to/your/first/file.html">
</iframe>
iframe requires src (source) parameter, which should be a valid URL where html file lays. However you can use javascript to assume this type of behaviour.
Using jquery for example:
$('.div2').html($('.div1').html());

How can I make my HTML model data display in a <textarea> as it would in a browser?

My code returns HTML data from ASP.NET as a response from an action method.
I am displaying this in a <textarea> element.
<textarea style="width: 85rem; height: 15rem;"
ng-disabled=true
ng-model="access.response"></textarea>
However when it displays I see the actual HTML.
How can I make it so the information displayed in the textbox or some other way is the same as in my browser window? Note that I do not want to edit the data but I would like the scrollbar type feature.
Is correct to say that you cannot display it in a textarea, but you can't use a simple div neither to display the parsed HTML.
Take a look at this Plunkr --> http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP
You have to make use of the $sce service and the ng-bind-html directive, like this:
<div ng-controller="SimpleCtrl">
<!-- This will be parsed as HTML-->
<div ng-bind-html="to_trusted(someCode)"></div>
<!-- This will not -->
<div>{{someCode}}</div>
</div>
No way to do it with textarea.
If you want editable HTML content, consider this:
<div contenteditable="true"></div>

newly dynamically created (by javascript) html content cannot see the previously used javascript file in the head

I have a link (A link), which dynamically creates some html content into the page by a js file placed in the head content. This works well.
<head>
<script src="my.js">
</head>
<body>
<div>
<a href="A link">
</div>
</body>
Than clicked the A link, and this is created:
<div>
<a href="B link">
</div>
The newly created html content also contains a link (B link), which should use the same js file, as used before, but it seems, that the B link cannot see it, however the js file is still in the header content.
Works only if I put the js file in a script tag to the end of the dynamically created html content generated by A link, like this.
<div>
<a href="B link">
<script src="my.js">
</div>
But this means I load this js file twice. What am I missing here?
Thanks.
If you want the newly created element to perform some action then you should use this technique using jquery.
$(document).on('click', '.linkclass', function()
{
// Perform your action here.
alert('I was clicked');
});
live of Jquery is now obselete and is better to use on. In this way your all newly created element or already created elements having class as .linkclass will perform alert(); action. Hope it helps.

create html templates textarea or script or div or else

I have seen html templates created using any of the following tags
<textarea>
<script>
<div>
Which one is better and why?
Which of the following way of creating html templates is better and y?
CSS:
.template {
display: none;
}
textarea :
<textarea class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</textarea>
script :
<script type="text/html" id="tmpl1">
<div>adfsdfsdfs</div>
</script>
div :
<div class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</div>
I had faced problem with script tag here
i would suggest none of the above options take a look at Mustache it was created by one of the founders of git hub
http://mustache.github.com/
definitely my favorite way to do html templating
They are all poor choices.
textarea is designed to accept user input
div elements are designed to present content to the user
script elements are designed to hold programs
If you want to embed a template into an HTML document, then I'd write a JavaScript program to store it in a variable (and use a json serializer to generate the JavaScript literal that gets assigned to that variable). That program can then go in a script element.
Alternatively, store the template in a data-* attribute on an appropriate element.

Appending HTML to end of body using javascript

I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.
I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?
Since you tagged the question with it, here's a jQuery solution.
$("body").append("text");
Remember that the parameter can also be a DOM element. So you can do this :
var p = $("<p/>").text("a paragraph");
$("body").append(p);
the easy way with jQuery is:
$('#result').load('test.html');
<div id="result"><!--/ Hold My Data! /--></div>
obviously you can change #result with body
Also you can try some templates library..
Like handlebar and underscore..
and append in the el provided by backbone.js
Suppose you want to append this html in your template, then you can use the below code according to your application
Consider the code
Example 1:
rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);
and please make sure that the js should be include in that file.
Here is the information of variable used above:
row data - the html that you want to append,
param- if you want to show the value of java script variable on browser dynamically,
#ID- ID of the div in which you want to append this html
example 2:
Consider the following HTML:
<h2>Hello World</h2>
<div class="user">
<div class="inner">Hi</div>
<div class="inner">Bye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Lorem Ipsum</p>" );

Categories