I am a beginner in web development, and I have some misunderstanding.
From wwwschools:
AngularJS extends HTML with new attributes.
So angularJS uses for example ng-model, ng-app and so on.
My questions are
Why does AngularJS does this, when adding custom attributes makes the HTML invalid?
Can I add my own attribute like <h myAttr="hello"> and then access it with JS just like a normal attribute?
Angular doesn't add them by itself. It allows you to use some custom attributes, like ng-model to deal with its functional stuff, but you have to set them by yourself.
And if using non-standard attributes bothers you, you can replace them by data-* valid attributes, like data-ng-model="stuff".
Finally, adding your own custom attributes (generally called directives in Angular) is often use. You can check angular doc for a hint on how you can achieve this.
Why does AngularJS does this, when adding custom attributes makes the HTML invalid?
The idea is that you can write your own custom self-contained elements that better explain what their purpose is. For example, instead of:
<div class="date-picker" data-initial="2015-08-08"></div>
you can write:
<date-picker value="2015-08-08" />
which is more self-explanatory than a plain <div> with a special marker CSS class.
Of course this wouldn't just work out of the box, you would have to define this new date picker element by writing an Angular directive.
Can I add my own attribute like and then access it with JS just like a normal attribute?
Yes, you can, by writing a new directive (see above).
Related
Is there a way to find out, for any given element, which AngularJS directives were applied on it/its attributes?
In a large web application, I am looking at an HTML element that has an additional attribute that I suspect might invoke a directive (the attribute name is obviously specific to our application). Or it might simply be dead code.
It looks something like this:
<button ctl-remember-special data-ng-click="handleAction()"></button>
(ctl-remember-special being the possible directive in this example)
I cannot seem to find a directive of the appropriate name in our project, but I am not entirely sure because some of the identifiers in our application are assembled at runtime. (To provide an impression of the dimensions, I am seeing more than 6000 directive definitions in our code.)
I have two input fields, both generated by the same template. On both I am setting
...
templateOptions: {
...
required: true
}
One input field is registered using formlyConfig.setType
the other using a directive. I have created a JS Bin here.
Only the first is getting the required attribute, the second is not. In the docs for custom templates (controller option) it says:
Provides you the ability to add custom behavior to the type without having to make an entire directive (you can make a directive instead if you wish).
What am I doing wrong?
The problem in the second example that when angular-formly is processing the options with the template, all angular-formly sees is: <plain-text> for the template. Hence, it doesn't know what element to place the required attribute on. angular-formly will only attach attributes like these to elements that have an ng-model on them because those are the only elements where that attribute makes sense.
Again, the key here is what angular-formly sees when it's processing the template (before it's compiled). It doesn't matter what the directive compiles to. So yes, you can use your own directive, but if you want to leverage the features of angular-formly, it needs to utilize the ng-model controller (like directive used in this example).
Good luck!
Is there any way to achieve angularjs attribute directive in polymer. I want to call a function based on a particular attribute attached to any element.
This is what works for me right now, but this is very non-generic.
Is there any easier way to extend behavior of elements using just attributes like
<paper-input behavior="custom-behavior" custom-behavior-attribute="some-data"></paper-input>
I have started building an app in Polymer which was already done in Angular. Even I had the same query running on my mind and I found this link related to this topic and it says Polymer's behavior is the equivalent to Angular's attribute directive.
https://plus.google.com/+JustinFagnani/posts/EjdR14bA7Dj
It will be useful if someone can confirm that there are no other approach available to achieve the same.
When making angular directives, it seems there are a set directives that could just as reasonably be defined as an HTML element, or an attribute. I am trying to figure out what the community convention (if any) is around which one to pick, and why.
So for example, an attribute centric view may be:
<div list-container>
<div list-filter/>
<div list="listOptions"/>
</div>
and the same in a element style view:
<list-container>
<list-filter />
<list controller="listOptions" />
</list-container>
My personal preference is for the second one (seems easier to read, dont have to worry about spans vs divs, etc), but most of the examples and libraries i've seen seem prefer the attribute approach (makes for valid html?)
If you want to support IE8 or below, forget elements. Attributes or class names is the way to go.
Otherwise, I think it largely depends on the type of directive:
If the directive is meant to be used as a component, i.e. substantial functionality, has it's own template etc, I would go for an element. Examples are tab controls, accordions, calendar etc.
If the directive is just about adding a small behavior to either a built-in element (input, select etc) or a custom directive of the first kind, I would make it an attribute.
This is a follow-up question for In jQuery is it a bad idea to use name=X for all selectors?
I am using Backbone and decided that I wanted a way to differentiate between HTML elements that were bound and those that were not.
So I would write (in HAML):
.container
.title(name='title')
.separator
As you can see it's clear that the dynamic element is title.
The reason for this was so I could mess around with the style and rename classes without worrying about breaking the app. It also means in the template I can tell what the dynamic elements are without needing to go back and forth with the Backbone View.
My question now is, without using the [name] selector, does anyone have a code convention to keep track of which HTML elements are referenced from JS.
I have considering:
Using a common prefix on class names (e.g. class=bind-title)
Using some sort of custom HTML element (
Thanks!
FYI: I'm using CoffeeScript, Backbone and haml_coffee templates.
Updated jsperf to test all suggestions:
http://jsperf.com/class-or-name-attr-lookup/3
I would consider using a class to indicate that it is dynamic.
I'm not sure if you are aware of this but you can have multiple classes on one element. Like so:
.container
.dynamic.title(name='title')
.separator
This works in traditional HAML but I have not tried it with haml-coffee. If it doesn't work, you might have to specify the class like .title{:class => "dynamic"}(name='title').
I prefer this over a prefix on the class name because it's more semantically meaningful, which is how HTML should be used.
I am using data-view attribute on elements being set when rendering my Views.
This helps me to then show a tooltip in a browser window when I hover over View(s).