Simple question regarding arguments for AngularJS directives within markups. Let's consider the following markup that has it's own directive.
<div selectbox resource="http://resource.org/asset/1">
</div>
we are passing an argument called 'resource' - and it's ok, but just wanted to ask as it's recommended to use in HTML5 data-* prefixed attributes is it better to write
<div selectbox data-resource="http://resource.org/asset/1">
</div>
which convention is better and why?
Better use custom html attributes with data- prefix, first of all it's described as standart for custom attributes and if you want to validate your html all custom attributes without data- prefix will be invalid.
From Angular Docs
If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind).
More info:
Post about data-*
Use with css3
Related
I want to use ng-model directive as element rather than as attribute inside tag,is there any way to do it?
well I've already designed my webpage in html and javascript and I want to include it in angularJS using "ng-include". So rather than adding attribute like,
<input type="checkbox" id="checkbox" name='rejectedPartsConfirmtodothis' ng-model="reject">
I want to put it in the format like, (as said in angulaJS documentation )
<ng-model>
<input --->
</ng-model>
but this is not working, any idea how can I make it work?
Quoting the content of the page
Usage
as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-model>
...
</ng-model>
according to v1.5 official documentation : https://docs.angularjs.org/api/ng/directive/ngModel
Usage
as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-model>
...
</ng-model>
I dont really think there would be a use case where you would really need to do this...instead try some alternative but use ng-model as an attribute as ng-model is a pre-defined directive given by angularjs...
You can build a new directive but you cannot modify ng-model to work as an element.
I've used both href and ng-href and I couldn't see the difference between them.
Why does Angular have the ng-href attribute, and when should I use it?
From the documentation:
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.
Effectively, the only place you're using it is for links in which you need to rely on a value provided to the DOM by Angular. If you do not require Angular for a part of that link, or you don't plan on using Angular to generate that link, then you do not need to use ngHref.
If you need to bind values from your model you use the directive. For example:
<div ng-init="address='http://stackoverflow.com/questions/37467603'">
<a ng-href="{{address}}">Dynamic link</a>
<br/>
Change the link dynamically: <input type="text" ng-model="address">
</div>
In the example above, the value of address is programmatically bound to the value in the input text box, which you can change.
If you don't need to be dynamic (i.e. react to a change in the model's state), then you can simply stay with href:
<a href="http://stackoverflow.com/questions/37467603"/>Static link</a>
In AngularJS when using ng-app: ng-app found in the document will be used to define the root element to auto-bootstrap as an application.
In some of the application it is being used as data-ng-app.
Is there any difference in both of the following declaration, If Yes what & If No then which one is significant and why ?
1.
<body ng-app>
<p>{{ 1 + 2 }}</p>
</body>
2.
<body data-ng-app>
<p>{{ 1 + 2 }}</p>
</body>
Both and are the same except for the fact that if you want your template/code to be according to be HTML compliant and follow the best practices. Use data-ng-app.
This is what the official documentation quotes:
"Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them."
Hope that answers your question.
Cheers!
See the answer:
ng-app vs. data-ng-app, what is the difference?
Only diffrence regarding html5 validation
ng-app isn't strictly valid html.
Custom attributes should be prefixed with data- to be valid.
So angular added this syntax so users could still have valid html.
(Knockout also uses data- attributes.)
There is absolutely no difference in functionality.
Source: w3.org - custom data attributes
ng-app and data-ng-app both are similar to each other, the only difference between them is sometimes HTML validators will show an error while using ng-app. so that time you can use data-ng-app.
note: x-ng-app also have the same property. You can use x-ng-app too instead of using data-ng-app.
I am an AngularJS newbie and trying to figure out what class=ng-binding does in this example:
<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>
I found it here:
http://todomvc.com/architecture-examples/angularjs/#/
I use Chrome and developer tools. Is this an angular keyword? I could not find it in the manual (http://docs.angularjs.org/api/ng.directive:ngBind)
class="ng-binding" is used internally by Angular. For example, looking at the ngBind source we find this line that adds the class and associates the binding with it using .data:
element.addClass('ng-binding').data('$binding', attr.ngBind);
That's why this line of Angular source (noting the double curlys on {{todo.title}} result in an ngBind):
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
Is translated into what you see in the debugger:
<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>
So class="ng-binding" isn't something you should use. You'll find Angular frequently uses classes, comments and other markers- so you'll often see this kind of change between the original html and the Angular processed results.
From the docs:
ng-binding
Usage: angular applies this class to any element that is attached to a
data binding, via ng-bind or {{}} curly braces, for example. (see
databinding guide)
So the class ng-binding is applied by angular dynamically, for the compiler to understand that, element has a data binding associated with it.
As a developer we don't have to worry about that unless we apply some styles to these classes.
From 1st view seems like data-ng-click can pass some data as argument to method should be invoked during pressing on button.
But I don't see the difference.
I have followed snippets of code:
HTML
<input
type="button"
value="Fess"
ng-click="toggle(2)">
OR
<input
type="button"
value="Fess"
data-ng-click="toggle(2)">
JS
$scope.toggle = function (valueS) {
alert(valueS);
}
Both work.
Thanks,
They are the same thing. You can use data-ng-click to make a valid html.
From the angular docs on directives:
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.
Leaving them out is totally fine for practical purposes. It's just that if you run it through an html validator service, it will not pass as complliant.
HTML5 has an ability to embed custom data attributes on all HTML elements
These new custom data attributes consist of two parts:
Attribute Name
The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.
Attribute Value
The attribute value can be any string.
<li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
source : http://html5doctor.com/html5-custom-data-attributes/
Found a difference while using with and without Form.
When my element is in a Form they act the same.
When I use data-ng-click on an element not within a form, Click event is not happening.