Why would I use one over the other, except if I need to define the style from a function?
<div once-style="{width:50%;}"/>
once-style
<div style="width:50%;"/>
HTML Style Attribute
If i have a fixed style in an AngularJS application is there a reason to use one over the other?
I tried finding relevant information, i just found this which really didn't answer my question.
One time binding is native to Angular. Inside the curly braces prefix the expression with a double colon. For example:
{{::name}}
Related
I'm reading some code and there is a piece of html that reads:
<div id="uniqueId1234" data-target=".uniqueId1234">
...
</div>
and then earlier on in the same html file there is a span element that seems to use this div as a class:
<span class="uniqueId1234">
...
</span>
Can someone explain how this works? I thought that a class was something created in a css file. Sorry if this is a dumb question.
This is likely part of some piece of Javascript code or a library that listens for some type of change or event on your element with the data-target attribute.
When this event is triggered, it can then use the value of that attribute as a selector for performing some other logic as seen in this basic jQuery-based example below:
// When an element containing your data-target attribute is clicked
$('[data-target]').click(function(){
// Find the appropriate target (i.e. ".uniqueId1234")
var target = $(this).data('target');
// Then use it as a selector for some type of operation
$(target).toggle();
});
Classes are very common within CSS to style multiple elements, but they can also commonly be used as a mechanism in Javascript as well, which is likely the case in your scenario here.
What does it mean to set data-target attribute of a div to the id of that div?
Nothing standard. data-* attributes are designed to hold custom data for custom code (typically client side JS) to process.
I thought that a class was something created in a css file.
Classes are an HTML feature used to put elements into arbitrary groups. They are commonly used when writing CSS, but also client side JS and other code.
What is the difference between ng-include and ng-bind-html in angular??
imagine a case when based on some parameters the html will change rather to be for example an image tag or span tag; so There should be a mechanism to add that dynamic html
for example
<!--dynamichtml : <span class='glyphicon glyphicon-plus'></span>-->
<a ng-include="'dynamichtml.html'"></a>
<a ng-bind-html="dynamichtml"></a>
ng-bind-html is described as follows:
Evaluates the expression and inserts the resulting HTML into the element[...]
ng-include, on the other hand
Fetches, compiles and includes an external HTML fragment.
The value in ng-bind-html should evaluate to valid HTML. The value in ng-include should evaluate to a valid URL.
ng-bind-html
ng-bind-html is used when one has a model that contains HTML in the string format. On binding the model with that of the DOM, this gets updated in the element, as its child.
ng-include
This adds an external html file in the DOM. Here, it doesn't gets bind, but only gets attached.
It depends upon the application and the model states, based on which one can decide with which directive to make use of.
Here, you can read more about ng-bind-html and ng-include.
I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs
Can I set data-* attribute with Thymeleaf?
As I understood from Thymeleaf documentation I tried:
<div th:data-el_id="${element.getId()}"> <!-- doesn't work -->
<div data-th-el_id="${element.getId()}"> <!-- doesn't work -->
Yes, th:attr to the rescue Thymeleaf documentation - Setting attribute values.
For your scenario, this should do the job:
<div th:attr="data-el_id=${element.getId()}">
XML rules do not allow you to set an attribute twice in a tag, so you can't have more than one th:attr in the same element.
Note: If you want more that one attribute, separate the different attributes by comma:
<div th:attr="data-id=${element.getId()},data-name=${element.getName()}">
With Thymeleaf 3.0 there is the Default Attribute Processor which can be used for any kind of custom attributes, e.g. th:data-el_id="" becomes data-el_id="", th:ng-app="" becomes ng-app="" and so on. There is no need for the beloved data attribute dialect anymore.
This solution I prefer, if I want to use json as the value, instead of:
th:attr="data-foobar='{"foo":'+${bar}+'}'"
You can use (in combination with literal substitution):
th:data-foobar='|{"foo":${bar}}|'
Update: If you don't like the th namespace, you can also use HTML5 friendly attribute and element names like data-th-data-foobar="".
If someone is interested, related template engine tests can be found here: Tests for Default Attribute Processor
Or you can use this Thymeleaf dialect https://github.com/mxab/thymeleaf-extras-data-attribute and you'll be able do
<div data:el_id="${element.getId()}">
I just need to know if this is the correct way of doing this.
I am trying to create an anchor tag that has an embedded image in it using a data attr. This will be used to determine what will be displayed at different media queries.
is this syntax correct? I have no idea. I am using bootstrap as my framework
<div class ="col-lg-12" data-test="<a href='http://www.army.mil/veterans/' target='_blank'><img id='va_badge' class ='badges img-responsive' src='images/armybadge.png' alt='Army Veteran Badge'></a>"> </div>
The syntax is correct. (You can check this using a validator like http://validator.w3.org) A data-* attribute may have any value. It may cpntain “<” characters, as they are not treated as starting a tag when inside an attribute value.
What you are going to do with the value is a completely different thing. It is all up to you. The data-* attributes are just containers for that that you can process with a script.