I've a html template that's been compiled and added to my dom via an append function. However it is not possible to change the style of the template objects because I have to wait till they are completely rendered in the dom. How is this possible?
My method call looks like that at the moment:
angular.element(document.getElementById('htmlContent')).append(app.compile(template)(app.rootScope));
Related
I have this small code that gets rendered the first time the page loads.
<div id="old-div">
<h2>{{description}}</h2>
<h2>{{example}}</h2>
</div>
Now the second time, an AJAX call happens and since first time the {{description}} and {{example}} are already filled, when i try to get the HTML of the template, instead of {{description}} and {{example}}, i get their values.
I don't want Handlebars to render the values to the expression when ajax call happens to that i can get the template and render new values.
Any help is appreciated.
Make a template, put it outside html <body> and use that to feed handlebars. You will be able to take it, feed handlebars and append to DOM with substituted values and retrieve the template itself (you can use <template> tag for it or <script> and add id attribute to reference it easily. That's how it's done on many websites.
I would suggest you to have a separate handlebar div for compilation purpose and use that compiled HTML to append in your appropriate div so that you don't override your handlebar code in HTML.
I am learning AngularJS by decomposing code samples and putting them together in different ways. What specific changes need to be made to the code in this plnkr so that code from an external script can be called from the index.html view?
The code is from this tutorial, and the change that I want to make is simply moving the JavaScript code to an external JavaScript file that is called from inside the view.
First I changed the scripts tags to be like in the example you linked to.
Second, I added ng-app="helloApp" attribute to the html tag, so the helloApp angular module you defined will run on the html element (instead of not running at all).
Third, and lastly, I changed Calvin Hobbes on line 42 to be {{name}}, so it will be binded to the $scope.name var in your controller, instead of being a regular static text.
Here is a working example.
I want to unify the navigation layout for my website, so I created a separate html file that holds the code for the navigation. I use a JS to load the file dynamically:
$("#navigation").load("/navigation/navigation.html", function() {
$.getScript('/material.min.js');
});
The problem is that the material.min.js does not get executed for the dynamically loaded components inside this html and I lose some crucial functionality. How do I fix that?
Check if the componentHandler is loaded, and try to upgrade the elements after load.
if(!(typeof(componentHandler) == 'undefined')){
componentHandler.upgradeAllRegistered();
}
How the Component Handler works
In short this goes over all registered components. Queries for all nodes with the provided CSS class. Loops over those and instantiates them one-by-one. When the upgrade is done on a node, the upgraded object is added to the dataset. This object contains a comma separated list of component classAsString properties to identify which upgrades have been done.
From the official docs:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.
So loading the material.js script again will not execute it. But you can do some experiments with upgradeElements by applying it to the whole loaded markup or to particular elements.
I want to add a script that applies to a DOM object of a certain type right after it is loaded/rendered. This type of object always comes together with the javascript script, and I want to put them together within some tag. Is it right to do it as below? If so, I suspect span is not the best tag to be used here because it may interact with the way the element inside will be displayed. What tag should I use?
<span>
<div>the dom object to be modified by the script</div>
<script>theJavascriptFunctionThatModifiesTheDomObject()</script>
</span>
I doubt this is the best way to load your script just after a particular element has been loaded by DOM due to these reasons:-
It makes your page load slower.
User will see your complete page in a discrete way.
Instead you should do this:-
Specify a selector to your element.
Include your single javascript code at the end of body.
Update DOM elements using that script.
EDIT:
Solution1: Append your JS at the end of body so that it has access to all the DOM elements.
Since you are injecting the element in DOM using ajax, you can define a success handler for XHR object which will modify your element in DOM.
Solution2: You can define a separate method in your JS and bind this method on some event. In your HTML markup define a data-event attribute and in your success handler append the element to DOM, extract the data-event using jquery data method and trigger that event.
Atleast it will keep you markup far away from scripting logic.
Some useful Links:
Best practices for speeding up your website - yahoo
Why we should load scripts at end - SO Link
The problem here is the script tag does not know where it is located in the DOM. It would be better to do something like add a class to the element[s] you want to alter. On DOM ready, you look up the element[s] and do your magic.
I would avoid this approach; scripts block the page loading
– so if you did this after several dom elements the page would run slow (or not at all if errors were found)
Try using jquery onready - example here : http://api.jquery.com/ready/
And scripts [usually] need to go on the bottom of the page to allow the page to load first
…there are exceptions to this rule such as the well known modernizer script library that needs to go first so it can evaluate the dom as it loads
I have some div:
<div id='dialog'></div>
Now I want to load into this div an external html file and use its js functions.
I know I can load it using jQuery.Load() and it works fine, the problem is that I want to use the html js functions.
The main problem is that I have several divs which I load this html file into them and I want that when I'm activating js function it will only work on the specific div.
Pass parameter to view that you are loading that will indicate container of the loaded view:
jQuery.Load(url, { containerId: 'dialog' })
I remember I had the problem back when jQuery1.4 was issued. In that version, .load() suddendly began stripping out the js when a target container was specified.
What I did at that time :
separate html and js in different files (let's say myhtml.html and myjs.js ), or views
have my js file act as a js module, with a public entry point function (say initContent) taking a jQuery element as a parameter
have an invisible link in myhtml.html, namely
after loading myhtml.html into my target div, search for $('a.dynamicJs') in my target div to extract js url, and entry point function from the href
if the js had not previously been loaded, dynamically load the js into the page trhough an ajax call
dynamically call the entry point function with the target div as parameter
This also worked with css.
It required some time to tweak it on all navigators (limited number of css sections on IE, different way to dynamically call a function), and I ended with much more code I expected in the first place. It also required a lot of refactoring of my html/js modules (but I must confess I ended having a code that was really cleaner)
I'm sure there are frameworks that handle this kind of situation way better by now. But this is what I came up with at that time.
Hope this will help