My question is in regards to an answer I found on Stack Overflow.
AngularJS: What's the best practice to add ngIf to a directive programmatically?
This strategy works perfect with one custom ng-if directive and the ng-if directive however what if you wanted multiple. I have spent hours trying to come up with something but can not think of a clean way to do this. Has anyone out there created a strategy for multiple custom ng-if directives?
Just use one and bind it to a function on the controller's scope that sorts out whatever complexities you have and returns a single boolean.
Related
So I'm a bit new to Angular, and I'm wondering what best practice would be if I wanted to be able to toggle content completely away. So you would be able to view it, or toggle off to hide it. Sorta clean things up. Should I use a if statement, or maybe give the content two sides (one being empty) and be able to switch between them? What would be best?
View switching in angular can be done in a multitude of ways. In order to do route based switching (switching based on the hash in the url). Use a combination of the ngRoute module which helps you to configure routes through the use of the $routeProvider and the ngView directive.
$routeProvider docs:
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
ngView docs:
https://docs.angularjs.org/api/ngRoute/directive/ngView
Also you can hide/show, add/remove content via these directives
ngIf - will completely remove and destroy the scope of the content
https://docs.angularjs.org/api/ng/directive/ngIf
ngSwitch - will work similar to a switch statement in javascript. This is used in conjunction with ngSwitchWhen and ngSwitchDefault. Like the ngIf directive this will also remove and destroy the scope of the content.
ngSwitch/ngSwitchWhen/ngSwitchDefault
https://docs.angularjs.org/api/ng/directive/ngSwitch
ngHide/ngShow - per the name these directives will simply toggle the classes ng-hide and ng-show respectively. ng-hide has a css property of display: none.
ngShow:
https://docs.angularjs.org/api/ng/directive/ngShow
ngHide:
https://docs.angularjs.org/api/ng/directive/ngHide
The directives that completely remove the contents can be better for performance since the number of watchers in your app can accumulate fairly quickly. In most cases I'd suggest using the removal based directives for anything that has an evaluation of the scope beneath it and use the hide/show directives for simple static content display.
There are example usages of each of these directives on all the documentation links I've included. Feel free to comment with questions.
I'm working with angular js and there's one thing I didn't fully understand yet. I know what directives are: they are "additional features" that we add to HTML that can be used as elements, attributes, comments or classes and that can change completely the markup there by some other thing rendered by angular or can add functionality with the link function.
That's fine, but when to use directives? I know that if we want to represent on screen some domain specific object then this is one possible candidate for a directive, or when we want to add functionality to some HTML element (like slider functionality to an input) then we use a directive. But what about other cases? What about when we want to manipulate the DOM to, for instance, activate the functionality of a sidebar or thing like that? Directives are used for this to?
How do when know when to use a directive in angular?
I think about directives when I face one of this two scenarios:
Custom control: I need to implement a custom control, that probably I will reuse in other parts of my app or even other projects.
Custom Validations: AngularJS provides a limited set of validations (e.g. ngRequired, RegEx...), but for sure you will need to implement your custom logic validations. I prefer to implement that validations in directives (reuse, SRP, easy to be tested isolated) rather to overload the controller with that logic.
Some directive rules of thumbs:
If you plan on adding the same markup-based functionality more than once, create a directive (but if it's simple enough, just use ng-include).
If you need to modify the way an ng-modeled input field validates, formats, or parses, create a directive that requires ngModel.
If you want to make writing unit tests easier for a specific piece of markup, write a directive.
If you come from a jQuery background and instinctively feel like using $('.jquery-style-selectors') from your controller, instead write a group of directives where the child directive(s) require the parent directive(s) and communicate via the directive controller(s).
I'm currently working on a new custom directive which will transclude some HTML around the element you've called it on. This means however that if you have a ng-show directive as well on the element that the HTML would still be transcluded and hence shown.
A working example of the directive is located on this Plunk.
I'd like to counter this, by making my custom directive respond to ng-show but I can see a big problem with this approach as ng-show will hide or show the whole element it is called on.
On the other hand, I don't really like having a lot of custom directives each defining their own visible properties as an alternative to ng-show.
A third option would be to support both? This would allow me to switch of specific directives on an element as well as hiding it completely with ng-show
Has anyone got good recommendations on which approach I would have to take here? This is not a solitary case, we have a lot of custom directives of which we'll need to control visibility.
To summarize, these are the three options I'm thinking of:
Let custom directive respond to ng-show
Define own visibility control per custom directive (which could use ng-show underlying)
Support option 1 and 3
Any insights greatly appreciated.
I have read some articles that said ng-repeat would led to poor performance if there is over 2000 items, because there are too many two way binding to watch. I am new to angularjs and have trouble understanding the relationship between ng-repeat and two-way binding:
Does ng-repeat (like outputting a list of json objects) necessarily create two way binding?
Is there a simple way to do ng-repeat using only one way binding? (preferably do not need external module)
Like user1843640 mentioned, if you are on Angular 1.3, you can use one-time-binding, but, just for clarity, you need to put the :: on all the bindings, not just the repeater. The docs say do this:
<div ng-repeat="item in ::items">{{item.name}}</div>
But, if I count the watchers, this only removed one. To really drop the number of two-way-bindings, place the :: on the bindings within the repeater, like this:
<div ng-repeat="item in ::items">{{::item.name}}</div>
Here are two plunkers that will display the number of watchers:
All Bindings
Repeater Only
Thanks goes out to Miraage for provinding the function to count the watchers https://stackoverflow.com/a/23470578/2200446
For anyone using or upgrading to Angular 1.3 you can now use "one-time binding". For ng-repeat it would look like this:
<div ng-repeat="item in ::items">{{item.name}}</div>
Notice the ::items syntax.
For more information check the Angular documentation for expressions.
This blog post presents some interesting solutions. The end result was:
Upgrade to AngularJS 1.1.5 and use limitTo together with Infinite scrolling. AngularJS ng-repeat offers from version 1.1.4 the limitTo option. I slightly adapted the Infinite Scroll directive to make scrolling within a container possible that does not have height 100% of window.
Basically you limit the number of objects you initially render, then use the Infinite scrolling directive to render more as needed. Since you don't want an external module, just mimic the infinite scroll functionality as needed with your own script.
Note: This should solve your performance problem but it won't remove two-way binding.
what ever is generated by ng-model will be having a watcher on data(model) which reduces the page performance if it crosses 200 watchers.
Refer this for ONE WAY BINDING http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ but make sure you use it properly
Hope it helps!!!
I am pretty new to AngularJS and creating directives.
Lets say I wanted a "delayed ng-show", that means it should work like ng-show, but the element should be visible after 2 seconds as opposed to immediately the expression was fulfilled. I don't want to change the current behavior of ng-show, just to create a new ng-delayed-show directive.
Can anyone give me an example or link me to direct documentation on how to reuse or create a sub directive of another directive?
You do not need to create directive for this. You can very well do it using animation capabilities of AngularJS which internally uses CSS capability called easing.
Read documentation for ngshow and it's animation section here http://docs.angularjs.org/api/ng.directive:ngShow
Since i am not very familiar with it, this post can help you http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#how-to-use-animations-in-angularjs