Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
As an angularjs developer i want to know when i should use attribute versus an element
AS per my understanding and development knowledge Use an element when you are creating a component that is in control of the template. Use an attribute when you are decorating an existing element with new functionality.
But i am not sure ... please suggest
Angular directive documentation
Original answer by ckruszynsky:
The angular guidance says that you should use the "element"
restriction whenever the directive has full control over it's template
meaning it has a template that it is rendering out, etc.
For attributes, they suggest to use these only when you are adding
"behavior" to an existing element or decorating an existing element.
For example, think of the ng-click directive, this is used a attribute
not as a element because the click directive is just adding the click
behavior to some element.
Another example would be the ng-repeat directive, it is also used as
an attribute not as a element because it is going to repeat the
element in which it is being used in.
Now, this guidance is from the angular documentation; however, I don't
know necessarily that element vs. attribute is going to give you a
"better" approach it's more of a convention.
Now if you have to support older browsers, then you may want to
consider using either the comment or class directives.
My personal preference is to just use the attribute restriction;
mainly because people that are new to angular get overwhelmed at first
when they see the restrict and it's variations of the options that can
be used.
This question is quite opinion based, personnaly i use only attributes but i'm probably not the one to follow
However i can address some points following how HTML is designed :
element fits for a component (like an input, table).
attributes fits for options that influence the behaviour of your component (like type="text"). But they can be used as components too, as long you don't use two of them in the same element.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am trying to create a long-form page that will have 5 fields per each page with continue button. What is best format for coding alignment especially in react js with functional components only.
I have 3 approaches in mind.
Keeping each page fields in different pages like page1, page2, page3 and then access in parent.
Keeping all fields in one file and accessing those using switch case by passing page numbers.
Keeping all fields in one page and loading all fields, but hiding some fields based on the page number.
If there is any other best standard approach that will reduce future maintenance, and fewer coding changes, with less duplicate code so... on please prescribe hear.
The best approach according to me would be making a single component that will hold all the form values and conditionally render them on screen. What you can do is, create three div's that will render conditionally like:
{ step === 1 && <div>{"Your form here"}</div>}
The best part of this approach is that you will have all the form data at single place. And then you can easily pass that data to an API and make a request.
I'm part of a team with about 6 UI devs, of varying quality and next to no Angular experience. Many are contractors, with little experience with the code base. The app has a very fancy (complicated) UI. It supports IE8+ (soon hopefully IE9+).
We're introducing Angular for a major extension to the app, and I've been asked to write guidelines on the use of Angular for the team.
We'll use directives to create fancy UI elements, all prefixed with "ipwr" to avoid name clashes. I'm trying to decide whether to mandate that devs give their directives the restriction "element" or "attribute". Mandating only one, to avoid chaos and confusion.
My question is: what restrict is better or more popular for directives, "element" or "attribute"?
My main concern is ease of use for people with little Angular experience who are new to the application code base, to reduce bugs, copy and paste behaviour, etc.
The angular guidance says that you should use the "element" restriction whenever the directive has full control over it's template meaning it has a template that it is rendering out, etc.
For attributes, they suggest to use these only when you are adding "behavior" to an existing element or decorating an existing element.
For example, think of the ng-click directive, this is used a attribute not as a element because the click directive is just adding the click behavior to some element.
Another example would be the ng-repeat directive, it is also used as an attribute not as a element because it is going to repeat the element in which it is being used in.
Now, this guidance is from the angular documentation; however, I don't know necessarily that element vs. attribute is going to give you a "better" approach it's more of a convention.
Now if you have to support older browsers, then you may want to consider using either the comment or class directives.
My personal preference is to just use the attribute restriction; mainly because people that are new to angular get overwhelmed at first when they see the restrict and it's variations of the options that can be used.
I usually defer to the John Papa AngularJS style guide when making these types of decisions. He says:
Lean towards implementing as an element when its standalone and as an
attribute when it enhances its existing DOM element.
If you want to keep your HTML valid you'd use attributes, e.g. if you have a directive ipwr-modal, you can declare it as <div data-ipwr-modal="you-could-put-some-binding-here"></div>.
When creating directives with a custom layout, however, you'd better use element declaration (if you don't need to have your HTML valid). This is the more obvious way to say: "hey, we have a custom component here".
This blog post explains it with some more ideas
Some points to consider:
Most of the time attributes is the best/most convenient option (it's not the default by chance).
Anything you can do with element-bound directives, you can do with attribute-bound as well.
Element-bound directives can be more descriptive/readable at times.
If you want your code to pass certain types of validation, you should use attributes.
Since you want to support IE8, keep in mind that custom tags have an extra overhead (more info), which hurts maintainability.
BTW, you can't limit directives to elements only (without affecting functionality), so it is more a question of allowing 'element' or not. Note that an element often has more than one directives and directives placed on the same element can cooperate and augment each other's behaviour. So limiting the use of directives to 'element', means limiting the number of custom directives per element to 1, which severly reduces the functionality-potential.
That said, this is what I ('d) do:
If IE8 is not an issue, allow both (mostly use attributes).
If IE8 (or the overhead for custom tags) is an issue, use only attributes.
In general, if only one form should be allowed, it should be attributes (works anywhere, no extra overhead, offers all functionality).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I can't find any documentation on ng:click. My todo list application does not work unless I use ng:click as opposed to ng-click, yet I can't find any documentation on it. Is it the same as ng-click?
From the docs here: http://docs.angularjs.org/guide/directive
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes. Convert
the :, -, or _-delimited name to camelCase.
So, angular interprets all of these as ngClick and then runs the directive named ngClick.
<button ng:click="myFunc()">ng:click</button>
<button ng-click="myFunc()">ng-click</button>
<button ng_click="myFunc()">ng_click</button>
See this live demo (click).
This being, your issue must be with your usage, which is not included. As this post is asking "What is the difference" and you have been answered that there is none, you might want to make a new post concerning the issue with your code and include your code.
Update based on your comment:
There are so many problem with your code that it would be unreasonable to go into depth about all of them. I'll give you some starting points for study.
First, here's a live demo of your code as it ought to look: http://jsbin.com/arAkuZo/6/edit
The "br" tag is deprecated and should no longer be used. Use css for that.
Your angular version is far out of date.
Don't use the global syntax for angular. Make a module and add your controller, etc to it.
There are several directives like `ngModel` that you seem to be unfamiliar with.
camelCase is the accepted standard for variable naming and Angular emphasizes it, so make it a note to use camelCase always. (at least almost always).
Yes, they're the same thing. Read http://docs.angularjs.org/guide/directive and http://docs.angularjs.org/guide/ie.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
this is probably a stupid question but here it goes anyway. I know that services are like singleton that's good for storing shared data. However I've been struggling with some concepts - Is it true that when using built-in directives like ng-repeat, do we always have to write "middle-man" methods to access/manipulate the shared objects in services? E.g
we have
appModule.service('fruits', function(){
this.items = ["apples", "bananas"];
});
To use ng-repeat to access these items, we must first need to write controller method like
appModule.controller("fruitsController", function($scope, fruits){
$scope.getFruits = function(){ return fruits.items;}
});
How about using custom directives then? Given that the service can also be injected into a directive, it will have direct access to the service. Is there any pros and cons of either methods?
So I think you're asking "Why not use custom directives for everything instead of controllers?"...
Well, basically because that would be harder to test. It's sort of like asking "Why separate code at all?".
The purpose of a directive is to provide two way access between your model and your view (the DOM) and handle setting up those interactions.
The purpose of a controller is to encapsulate "business logic" for the app.
Can you mix them both into a directive? Yes. Should you? Probably not.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'd like the buttons in my app to give feedback, as for example demonstrated here.
I'm wondering how I should structure my code. I want to be able to change the classes, the text and maybe disable them upon click. I guess a directive is the right fit, but the exact changes that will happen depend upon the button, and putting content or class names inside a controller or directive doesn't seem very right.
Right now i have a very generic directive that takes all options through additional attributes, but I wonder if someone can see a better way of doing it?
Always start with a very simple directive and extend with CSS classes. If you want to do a particular work well anything you can use a function of the controller. I think you made the right choice. Think to look angular UI for best practice : http://angular-ui.github.io
You can add event on each action:
// Create a new instance of ladda for the specified button
var l = Ladda.create( document.querySelector( '.my-button' ) );
// Start loading
l.start();
// Will display a progress bar for 50% of the button width
l.setProgress( 0.5 );
// Stop loading
l.stop();
// Toggle between loading/not loading states
l.toggle();
// Check the current state
l.isLoading();