I've got this element:
<span id="tag_span"> {{ selectedSection }} </span>
And I want to get its content from controller, which is {{ selectedSection }}. I can get the element like this:
angular.element('#tag_span');
but don't know how to get what inside of it. Any ideas?
P.S. document.getElementById won't work in the case so there's no need to suggest it.
EDIT: No jQuery allowed.
You get the value by $scope.selectedSection from your controller.
If you need the get html inside the span element use
angular.element($('#tag_span')).html();
You need to reference the jquery before angular js like below.
<script type="text/javascript" src="../../Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../Scripts/angular/angular.js"></script>
Your all html elements are properties of $scope, so you could easily access the content via $scope.selectedSection . Your controller function definition must have a scope injection like function controller($scope), that is all.
Related
i have an ng-repeat but i need to use Angular expression inside javascript of my html page(of course app and controller are declared, but have not been posted here):
<div ng-repeat="eleRubrique in scopeComplet">
<script type="text/javascript">
alert('index ' + {{$index}});
</script>
</div>
That does not work. what would be a workaround ?
Thank you for an answer.
I think this would work for you
<div ng-repeat="eleRubrique in scopeComplet" ng-init="alert('index ' + $index)"></div>
And if you would need a more complex script I would recommend to write a function for that and call the function from ng-init
You should not use double curly braces {{}} in JavaScript. They are meant for HTML only in Angular.
Since the JavaScript code in your HTML has nothing to do with the view, can you not achieve the same goal in the controller?
I need to get the object of second level html element in my page.
<html>
<div id="out">
jasoidjisa
<html>
<head>//This object
<div id="in">
hihisdhi
</div>
</head>
</html>
</div>
<script>
alert(document.getElementsByTagName('html'));
</script>
Help me to access this html element via js
HTML is a reserved tag name and so you can't use it in the manner in which you have used it here. Which particular value from above are you trying to get exactly ? It might make sense to use the <div> tag with a class or I'd to identify it instead. If you specify which value you are specifically looking to get I can write up a theoretical solution.
vsank7787 was totally correct. Maybe you could use iFrames instead of nested html inside a HTML document since html is a reserved keyword.
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.
I am trying to bind data to angular template. But I'm facing the following issue.
I am using $templateCache to retrieve the template but I cannot find data into the template.
$templateCache.get('q1.index.html');
Now, I am also trying to do $compile($templateCache.get('q1.index.html')); but I am getting Error: [jqLite:nosel] http://errors.angularjs.org/1.3.14/jqLite/nosel error.
Can someone please let me know what I am doing wrong & how can I resolve it.
You need to use this format for your <script> tag
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
then somewhere else you can retrieve with $templateCache
$templateCache.get('templateId.html')
Or via ng-include
<div ng-include="'templateId.html'"></div>
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