I'm working on an existing website that currently use jQuery and PHP.
On a page, HTML code is generated by jQuery AJAX calling PHP code.
How would one add angular directives to this HTML code ?
For example, the PHP code generates :
<div class="testDiv">click me</div>
I would like :
<div class="testDiv" ng-click="angularFunction()">click me</div>
As I understand it, angular directives need to be compiled using $compile.
Is there a function like jQuery's "on" function I can use ?
Thanks
In that case, yes use $compile. If you want to learn angular forget the way you do things in jquery. If you try to mimic jquery that most likely will be wrong. That's why they call it the angular way.
Related
I have to include a html file inside a WebPage (Another HTML ) and I can do it effectively using AngularJs ng-include.
<div ng-include="'storage/html/storageResources.html'"></div>
I now have a requirement where I need to achieve the same using KnockoutJs and not Angular.
Is there something similar in KnockoutJs that I can make use of to include a html page inside another one?
In an angular js 1.2.22 version code, I saw this in the HTML
<div class="mainContent" ng-include="content"> </div>
and in its corresponding controller, I see this.
$scope.content = 'templates/contents/home.html';
I see its making an Ajax call to load the template.
I am working on improving the speed of the content display and I did some optimizations like minifying the javascript code and minifying css
My doubt is how to make this inline - without making the Ajax call. So, that I could check if there is visible difference in speed of the content showing up for this template?
I tried the gulp-angular-templatecache to cache templates but, it did not work.
Is there any workaround for this so that I can make this template inline ?
What you're looking for is Angular's $templateCache.
Depending on your task runner, you might want to give gulp-angular-templatecache or grunt-angular-templatecache a try.
I am working on standalone JavaScript application which is being coded in HTML 5.
It has almost 50-60 html pages including repetitive markup such as header, footer and nav.
But if I have to make change in header then I have to make changes in 56-60 pages.
Is there any solution to use reusable html markup so if I did changes in one page it will reflect to other pages?
I can't even use php.
Prepare one javascript function. Write your html elements through javascript or jquery function. run it in page load event. and call the function in html by div.
Put this javascript function in separate .js file. And call this js file in wherever you want. And just place the div wherever you want in the html page.
See this jsfiddle DEMO
I Hope this demo will useful to you in this situation.
If you are using HTML (.html) pages and do not have Server-Side-Includes option then you can use a JavaScript template (which is not too difficult).
Second option : use of iframe.
Write the whole javascript code in common_layout.js
Add every statement using id of that div and add this file with main layout.
$( document ).ready(function() {
$('#header').html('<b>Header</b><ul><li>First Link</li><li>Second Link</li></ul> ');
});
UPDATE: One of my favorite post from TutsPlus : Best practices when working with JS Templates
If you are just started with this application. You can think of using client side java script frameworks like - AngularJS. It would be lot easier to maintain the code and solve such trivial issues.
You can use object tag like this:
<object name="header" type="text/html" data="header.html"></object>
I am a newbie to javascript functioning and wanted to see its functioning regarding pasting dynamic data in the html.
I have this link where they tell what to use for the same in a table but I can't figure out how to do the same...
The link to the code is javascript link
I first made an html page using the html shown and then added the lines of javascript shown below it in <SCRIPT LANGUAGE="JavaScript"> tag.
But I am not getting the same output.... What am i doing wrong ?
Please help...
It seems like the example you're trying to imitate is doing client-side data binding. First of all, yes, you need to reference jQuery script in your page. Secondly, you'd be better off accomplishing client-side data binding with the jQuery Templates plugin.
Is there a Javascript component that allows me to simply pass it a string made up of arbitrary HTML (any HTML I wish to use) and will show that HTML in a lightbox?
I've been scouring the internet, searching for examples, but it seems like there simply isn't any component capable of doing this.
Even LightWindow, which claims to be all-purpose, still requires me to attach it to an tag with the href set to an element ID.
This isn't what I want. I want to be able to call a function and pass in the HTML myself.
(Another issue with LightWindow is that it requires scriptaculous as a dependency. The project already uses jQuery, and I'd rather not include two frameworks at once.)
Any ideas?
colorbox is great. It relies on JQuery.
To use it with an html string, you would call it like this:
$.colorbox({html:'<p>Hello</p>'});
You can use jqModal or jQuery UI dialog.
SLaks is correct. You should definitly use JQuery UI dialog. Here is an example of using the JQuery dialog as a modal, very similar to using lightbox.
$("#dialog-message").dialog({modal: true});