Angularjs: Get document.querySelectorAll in ng-include - javascript

I'm trying to get the reference of my button in a ng-include! But it doesn't work. (I load my script.js in my index.html).
Code in my script.js:
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ))
Code in my ng-include controller:
<div id="st-trigger-effects" class="column">
<button data-effect="st-effect-3" class="pushmenutest">Push</button>
</div>
For your information, when i put my 'div' code directly in the index.html it Works! I don't know why, when i put my code in the ng-include view it doesn't work. Certainly, because the 'DOM' hasn't be loaded ?
I tried inserting script.js at the end of the file. But I have the same result.
I'm trying to use this library : http://tympanus.net/Development/SidebarTransitions/

If that line is by itself and not within say an angular context. It will run before the ng-include is done. Therefore the querySelector won't find the element.
I guesstimate this is the case because you say if you include the in the .html directly it works.
Is there a reason why you need to get a hold of the button like that and can not use ng-click?
If you give us a bit more information we can help you further.

Related

Is there a extension or a way to highlight corretly code in laravel blade directive #section .... #end section in visualstudio code?

In my vs code, code between this directive dont highlight corretly.
I tried search for extension for this case but saddly with no results.
my case on picture
You did right by using #section() and #yield() the output in the main app.blade.php file. This is the first option to use extra js and CSS for a particular page.
But you are missing the <script> tag if you not doing #yield('script') inside the <script> tag in your app.blade.php.
Second option is use #push() instead of #section() and use #stack() instead of #yield().
#push directive push the code to parent #stack
Eg.
app.blade.php
#stack('css')
#yield('content')
#stack('script')
page.blade.php
#extend('app')
#section('content')
#component('child-component')
#push('script') push only child component script or css
`#endsection
#push('script') push this page script or css

how to Merge the .html file into one Master file with all scope values from releated html files in Angularjs

hi all i using angular js i have three html file like.Header,Menu and Footer.html i combined and show ecah html file in each div through id Now the three html file into one html file name is called Master.html
Code used for link html
<script>
$(function () {
$("#navbar-container").load("header.html");
$("#sidebar").load("slidebar.html" );
$("#footer").load("footer.html");
});
</script>
Header.html
i have a one scope variable in header page and it's shows correctly scope variable like say hello world.but when i combined into that means i merge into master page it's not working that scope values are not fetched i don't why anyone help to solve this problem
Please show how did You initialize the "scope variable" in header?
I think what You want to use here is the ngInclude directive which includes additional html code into current template.
So You'r example might look like:
<div ng-include="header.html"></div>;
....

Knockout + Ajax Content results in multiple binding error

I have built a web application with multiple pages. Some of them are Knockout-driven.
I am trying to apply some Ajax-optimized page loading and stumble over the following issue.
Say I have the following general page structure
<body>
<div id="content">
</div>
</body>
And the following view, which is using Knockout. I include the call to applyBindings inline for being able to load the right ViewModel for every view.
<section id="editor">
<ul data-bind="foreach: items">
....
</form>
</section>
<script>
ko.applyBindings({items: {}}, $("#editor").el)
</script>
I load the view asynchronously into div#content for example using JQuery.load("editor.html #content")
The first page load works fine, but when navigating away (again using JQuery.load) from this view and coming back again I receive the error:
You cannot apply bindings multiple times to the same element.
I have already tried to apply ko.cleanNode but with no success. What am I missing? The #editor node should be removed from the DOM when other content is shown. So I really do not understand how to clean bindings or reinitialize knockout.
Note: I do not want the old data, I want to initialize the Bindings like on a freshly loaded page
Could you test your $("#editor").el in console? It doesn't work in standard jQuery.
If your $("#editor").el returns undefined, your ko.applyBindings({items: {}}, $("#editor").el) is essentially binding to window.document.body.
You may try
ko.applyBindings({items: {}}, $("#editor").get(0));
...
// call cleanNode before loading new page.
ko.cleanNode($("#editor").get(0));
$("#content").load( "newpage.html" );
if your bindings in "editor" section doesn't change,i suggest you to load(AJAX) only json data from server,and replace(modify) your viewModel in the browser,in that way knockout will refresh the dom automaticly.

Mustache JS Templating - How do I embed a variable in a script tag string?

I just started using Mustache and I like it so far, but this has me perplexed.
I am using the GitHub gist API to pull down my gists, and part of what I want to do is include the embedding functionality into my page. The problem is Mustache seems to not want to have anything to do with my dynamic script tag.
For example, this works fine:
<div class="gist-detail">
{{id}} <!-- This produces a valid Gist ID -->
</div>
Additionally, this works perfect:
<div class="gist-detail">
<script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>
If I try to pull these together, something goes terribly wrong:
<div class="gist-detail">
<script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>
Chrome Inspector shows this:
GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found)
... which looks like to me something is weird with escapes or whatnot, so I switch over to the raw syntax:
<div class="gist-detail">
<script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>
And I get the same result in Inspector:
GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found)
How do I get the correct values to embed in the script tag?
EDIT
I am injecting the template as follows (in document.ready:
function LoadGists() {
var gistApi = "https://api.github.com/users/<myuser>/gists";
$.getJSON(gistApi, function (data) {
var html, template;
template = $('#mustache_gist').html();
html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, '');
$('.gist').html(html);
});
}
The actually template is inside of a ruby partial, but it is wrapped in a div (not a script tag, is that a problem?) (that's hidden):
<div id="mustache_gist" style="display: none;">
{{#gists}}
<!-- see above -->
{{/gists}}
</div>
I assume a div is ok rather than a script because in either case, I'm pulling the .html(). Is this a bad assumption?
To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}.
It seems like your template is in HTML and trying to retrieve the template using html() results in a pre-URL-escaped template to be returned. Try placing your template inside a <script type="text/html"> tag instead.
When you embed your template inside an HTML element that excepts more HTML elements as children, it may get processed by the browser as HTML. Escaping may occur. By using a <script> tag with a non-script content type, you're basically telling the browser not to touch your template.
It looks like your script is getting requested before Mustache has a chance to update the src property. What you want to do is define the template in a way that it's not parsed as part of the DOM. A common approach is to define your template inside of a <textarea> tag. This will preserve formatting and prevent character escaping.
<textarea id="gist-detail-template" style="display:none">
<script src='http://gist.github.com/{{id}}.js'></script>
</textarea>
Now, to instantiate the template:
var template = $('#gist-detail-template').val();
var html = Mustache.to_html(template, yourTemplateData);
Here's an official example: http://mustache.github.com/#demo

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