What is the difference between ng-if and data-ng-if ?
They both seem to work in the same way, however i am not able to figure out the difference in them as not much material is available on data-ng-if.
Technically both are same, but while validating your page W3C validator without defining data- on your custom attribute it will get failed, because W3C validator doesn't know anything about your custom attribute, so you must have to explicitly define data- before your custom attribute and then W3C validator will pass your HTML
They are equivalent. The $compile service links them to the same directive.
From the Docs:
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
For more informaton, see
AngularJS Developer Guide - Directive Normalization
arbitary attribute
HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as
<div id="thediv" data-ng-if="conditino"></div>
Both are actually one and the same.
Both are directives to specify Conditions.
You can use ng-if or prefixing ng-if with data- or x- like data-ng-if or x-ng-if.
Angular allows prefixing to its directives with data- or x- just for Validation due to "HTML5 validator".
Validation means you won't get any Warnings in Problems tab of Eclipse or any IDE that you are using like "Undefined attribute name (ng-model) at Eclipse".
You can use data-ng- instead of ng- if you want to make your page HTML valid nothing more than that.
The only difference between these two terms is that data-ng-app or x-ng-app validates the HTML while the ng-app didn't.
Functionality remains the same.
Related
I have begun to learn about AngularJS and am confused about what the differences are between the ng-app and data-ng-app directives.
Most of these answers are simply saying makes template valid HTML, or HTML Validator Compliant, without explaining what THOSE terms mean, either.
I do not know for sure, but I'm guessing that these terms apply to HTML validation programs that scan your code for standards compliance - kind of like lint. They do not recognize ng-app as a valid attribute. They expect non default HTML attributes to be prefaced with
data-attribute_name_here.
So, the creators of AngularJS have created alternate names for their directives that include the data- in front of them so that HTML validator programs will "like" them.
None in terms of the runtime behavior, those are just different styles of naming directives as described here: http://docs.angularjs.org/guide/directive
Directives have camel cased names such as ngBind. The directive can be
invoked by translating the camel case name into snake case with these
special characters :, -, or _. Optionally the directive can be
prefixed with x-, or data- to make it HTML validator compliant. Here
is a list of some of the possible directive names: ng:bind, ng-bind,
ng_bind, x-ng-bind and data-ng-bind.
As you can see from reading this the data- can be used to make your HTML pass HTML validator tests/
You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>
In modern browsers there is no difference, but in older IEs, they won't work unless you declare an XML namespace defining it.
There is also a validation difference in that ng-app is not valid XHTML, and will cause your webpage to fail HTML validations. Angular allows you to prefix its directives with data- or x- to allow it to validate.
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
This will throw an error
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
This won't throw an error
<div data-ng-app="scope" data-ng-init="name='test'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
</div>
The basic difference between these two terms is that data-ng-app validates the HTML while the latter don't.Functionality remains the same.
For more reference you can try w3Validator.
Absolutely there is no difference between the two, except that certain HTML5 validators will throw an error on a property like ng-app, but they don't throw an error for anything prefixed with data-, like data-ng-app. So using data- prefix with our angular directives is good.
Even you can make use angular directives in below mentioned ways
ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind
I'm a big fan of angularjs, I started lately to use it in all of my 'coding for fun' projects.
I have a big curiosity:
I have a two inputs, one disabled by a ng-disabled directive and the other disabled with an html tag (A better illustration in this link):
//...
<input type="text" disabled value="This is an html input text disabled" />
<input type="text" ng-disabled="true" value="disabled with angular js directive" />
//...
Using the browser ability I can right click on the input and remove the disabled and ng-disabled tags but only the one with the disabled tag would be editable, the other one will still be tracked by angular even when ng-disabled directives has been removed.
So, When and Why should I prefer using ng directives over native html tags? Which could be the impact of letting angular track all these actions? is it really worth to use it everywhere?
Use the native html 'disabled' if the element should always be disabled. (static, for example if you want to provide an input with text and never let the user change it)
Use angular if it should change based on variables value in the scope.
For example, say a button should change the state of an input.
<input type="button" ng-click="inpDisabled = true" >Disable Input</input>
<input type="text" ng-disabled="inpDisabled" />
live example
No harm will come if you still use ng-disabled="true" but it's redundant.
If you want to make directive static, you shoud use native html
<your-tag disable><your-tag>
against
<your-tag ng-disabled="true"><your-tag>
But AngularJS does not work this way, you shoud initialize your application and controller, then pass a variable as parameter to your directive:
JS:
$scope.isDisabled = true;
HTML:
<your-tag ng-disabled="isDisabled"><your-tag>
You shoud read more tutorials to make things clear
I just noticed that if i have a hyphen in the form name attribute or the input's name attribute, AngularJS validations don't work.
This doesn't work if i try to validate the fields
<form name="signup-form">
</form>
The below works perfectly
<form name="signupform">
</form>
Can someone please explain why AngularJs doesn't work in the first case? And if we were to have "-" work, how can we do that?
The problem is that the name you put into the name attribute is also the name for the JavaScript property under which the form is published on the scope (e.g. for using it inside your controller). An attribute name containing a hyphen is not valid JavaScript though. I'm pretty sure there is no way around it.
It can be done... when referencing the form in the controller you may do so using the array notation. e.g.
$scope['my-form']['my-input'];
When binding in the template you can also use array notation like so:
<div ng-if="this['my-form']['my-input'].$invalid">There is an error</div>
I have an app with many forms. Each field has several HTML elements, so I thought I could extract some directives (one per type of field) to keep my forms tidy.
I've created a sample app to demonstrate the problem, but I'm getting inconsistent behavior. In the sample app, a <link /> element replaces the <input />. In my real app, <input /> just gets removed from the DOM completely. I feel like this should be easy; why doesn't it work?
To answer your stated question, it's because you told it to, with ng-transclude. That replaces the contents of the tag with the original element, which I don't think you wanted; you probably wanted the original contents to be transcluded as the label instead.
This is probably what you're looking for:
<div class="form-group" >
<label for="{{htmlId}}" ng-transclude></label>
<input id="{{htmlId}}" class="form-control" type="text" ng-model="model" />
<span ng-repeat="error in errors">{{error}}</span>
</div>
I've moved the tranclusion into the label. While this works, I would also recommend the style of actually passing a label attribute, rather than transclude it, just for the sake of having a consistent API and simpler code; it's functionally equivalent, though, so don't let me bully you.
Also, you've got a few errors in your .js as well. First, you want to use = in your scope instead of &
scope: {
model: '=',
errors: '='
},
& is used to pass methods, while = is used for objects (this is a simplification). Since your model and errors are objects, you'll want to use = instead.
Finally, in your example, your html template and your directive's template don't have the same name... you've got an extra 's' in your .js, but that's probably just in the plunker and not your real app.
I have a repeater for a resource that contains an attribute with angular directives inside, mixed with text. What I'm trying to accomplish is to show form inputs dynamically depending on the object's property.
<ul>
<li ng-repeat="action in actions">
{{action.form_layout}}
</li>
</ul>
In this case action.form_layout could contain some text with directives inside that would need to be compiled too.
Open the <door></door> with this <key></key>
// <door> and <key> are directives that would return different inputs
// so this should be compiled to Open the <input type="text" name="door"></input> with this <input type="text" name="key"></input>
How can I accomplish this? Right now the property value is being printed in the template as plain text.
Thanks
Please have a look at this fiddle. http://jsfiddle.net/dH5Ln/
Here the door and key are separated as individual directives. With the help of the compile function, we are parsing the template and displaying the compiled template.