Only render angular directive after a property has been set? - javascript

I have a loading view that's set as the html inside the directive. Something like the following.
<my-directive>
<div class="loader"></div>
</my-directive>
I'd like the HTML inside there to be active until some property of my directive has finished processing.
The closest thing I've found is transclude but I'm not sure that's really what I want.
Is there a way to avoid rendering until some arbitrary point in time?

you can hide a html element until a property return true
<div ng-if="taskFinished"></div>
or
<div ng-show="taskFinished"></div>
both do the same think but with ng-show the hidden content are not recalculated on each unhide

What Alainlb explained is also how I would approach the issue, show in the example below:
<my-directive>
<div ng-if="loading">
<div class="loader"></div>
</div>
<div ng-if="!loading">
<span>Do everything in here...</span>
</div>
</my-directive>
ng-if and ng-show/ng-hide
I personally will always use ng-if unless there is a very good reason not to. Since ng-if will only render the HTML when the check has passed. ng-hide on the other hand will make the HTML code invisible but it is still there! When the directive is very complex, then the browser is doing pointless work calculating and rendering things the user can't even see. To me, the only time it makes sense is when you want to collapse items that you know for sure the user will open very often. Even in this case I would still consider ng-if, unless it takes a long time to render each time.

Related

Change CSS of element not in DOM

I have an element, let's say a circle.
And there is a list of item in a list view.
Initially, the circle is not rendered. I have set its CSS display property to none, and instead select an item message is displayed. The idea is when the user selects an item from the list, I want to show the circle changing its background-color property associated with selected item.
My approach is something like this
itemSelected(item) {
const itemtColor = item.color;
$('#selected-item-color').css('background-color', itemColor);
}
The issue is:
As the element is not present in the DOM when I try $('#selected-item-color'), it will return an empty list, and the change of property does not do anything. But on next subsequent selections, it works fine.
So, is there any clean way to do this before the element is actually rendered in the DOM either jQuery or JavaScript. Or, should I just look for a way to do this after the element is rendered, which I'm not sure if there is a way with my problem.
Any help is appreciated, thanks!
Edit:
I have the HTML code written in handlebars
The code calling above function
<div class="item-list-content">
{{#each itemList as |item|}}
<div class="list-item" {{action "itemSelected" item}}>{{item.name}}</div>
{{/each}}
</div>
The dynamic content
<div class="item-details">
{{#if selecteditem}}
<div id="selected-item-color"></div>
{{else}}
<div class="item-details-message">Please select an item</div>
{{/if}}
</div>
To solve your problem you can just use ngShow instead of ngIf. There are better ways to do that as well, but for your issue ngShow will solve your problem.
I tried out few things and could not get anything to solve this.
So, I ended up doing the next best thing:
Putting the code to change project color inside a timeout function.
A timeout of 1ms worked for me, however I have not tested it well, and to be on a safer side, an interval of 10ms should work without problems.
setTimeout()

AngularJS: special ng-if for directive to be applied / not applied

Let's say I have a block
<div class="myclass" mydirective="mycontrol.param">
</div>
that is repeatable (used) several times (but different by different parameters) in another directive.
I need to add the conditional to mydirective so it is persists in the block based on kind of ng-if true or false values for it.
What's the way to make it done?
P.S. What actually mydirective does is adds some DOM elemenets into the div it belongs to.

What is initialised first - controller or partial/html?

Hi please explain reason for following three scenarios as I am unable to know why is this happening -
1)
<div ng-controller="myctrl">
<p>something for DOM manipulation</p>
</div>
2)in route I write
('someroute',{
templateUrl : "mytemplate",
controller : "myctrl"
});
mytemplate:
<div>
<p>something for dom manipulation</p>
</div>
3)
<div ng-include="mytemplate" ng-controller="myctrl"></div>
with template being same as above
The controllers in all the above scenarios are same, and in all of them I am just trying to select p tag of DOM by writing angular.element('p'). But this seems inconsistent. It works very well in 2nd scenario, it never works in 3rd scenario and I am not sure about 1st sccenario. Can someone explain which method is best for dom selection/manipulation, as I have to add a class to this 'p' tag on hover.
I am not understanding which gets initialized first- controller or partial?
Manipulating DOM inside controllers is discouraged. Quote from Best Practice - Dom Manipulations:
Dom Manipulations should not exist in controllers, services or anywhere else but in directives.
If you only need to style elements on hover, using the p:hover CSS selector would be enough without touching the DOM. ng-class and ng-mouseover can help you if you really want the class.
For more complex scenarios, you may want to write your own directive. You can check the article above for a guide to do that.
Load order from the first case: HTML first. Directives like ngController are loaded after parsing the HTML. Therefore the HTML already exists when the controller is loaded.
Load order for the second case: I'm not sure about it. You may check documentation for ngRoute or uiRouter depending on the router you are using.
Execution order for the third case: Controller first. The directive ngController have higher priority than the ngInclude directive. Therefore, the controller is loaded first.
Quote from ngController documentation :
This directive executes at priority level 500.
Quote from ngInclude documentation :
This directive executes at priority level 400.

jQuery hide(), show() or html()

I have a
<div id="content">
</div>
and three js variables that store different html: content1, content2 and content3.
By user interactions, the content of mentioned above div changes to one of that that stored in js variables.
What is preferable either to directly set div content to what I need by user interaction:
$("#content").html(content2);
or to change div structure to:
<div id="content">
<div id="c1">
// value of content1 variable here
</div>
<div id="c2">
// value of content2 variable here
</div>
<div id="c3">
// value of content3 variable here
</div>
</div>
And doing hide() and show() to that inner blocks, i.e when I want content2 to be shown:
$("#c1").hide();
$("#c2").show();
$("#c3").hide();
?
I'd say hiding & showing divs.
It's less intensive, and if the content inside the javascript variables happens to contain elements that you'll bind to, you won't have to rebind everytime you refresh the content, and if you wanted to have some sort of animation between the different content, multiple divs also allows that.
As a side note, using jQuery it's less code to do something like
$("#c2").show().siblings().hide();
The two aren't really all-that comparable since they do different things. They may well give a similar perception but what's happening isn't the same in terms of markup. In fact, it's not uncommon to see .html('Something').show() chained together.
Passing a string to .html() replaces the content of the selected element, it does nothing to affect the element itself.
Calling .show() or .hide() only affects the element itself - all the descendants remain exactly the same, they just can't be seen because their parent is not being displayed.
By using .html() you are replacing everything inside your element. All references to these descending elements will become undefined and direct (non-delegated) event listeners will also be lost.
.hide() and .show() do exactly what they say. The data inside your element is still preserved, the event handlers still in place, it's all just 'hidden' by way of display: none.
If the content dynamically changes, without page-load, use .html(), if not, .show() and .hide() are more appropriate.
For the ease of use and shorter more cleaner looking code, setting the content through HTML is the right option!
Think of it as what you're trying to do, 1 DIV => Can contain 3 different contents, you can manipulate it through JS.
So, in your first solution, you actually have one div and manipulating it through JS:
$("#content").html(content1);
$("#content").html(content2);
$("#content").html(content3);
Whereas, in the second solution, you are actually using 4 divs for the same functionality! So definitely, if you can do something with 1 div. That's the preferred way.
They both are taking equal lines for JS, but with the second approach, your HTML will contain a lot more code considering your contents are large.
I think that the best solution is to store the different contents into three variables and then assign to the div the choosen one with
$("#content").html(content2);
In this way you have three less nodes on your DOM tree
There isn't that much difference between the two options. One factor that might affect this is the actual size of the content you are changing. If the content is relatively small then it really doesn't matter which way you choose.
Another thing to consider is how available the three versions of the content variable is. If you have to fetch this HTML content each time you load it then it might make sense to pre-populate the content before you display it to your users so as to save the time it takes to load it. Then just show/hide the appropriate content.

Getting an Element in AngularJS

It seems that getting an element in AngularJS is a bad idea, i.e. doing something like:
$('.myElement')
in say, a controller is not an angular way of doing things.
Now my question is, how should I get something in angular?
Right now, what I'm doing (and is an accepted way of doing it) is by watching a variable, and my directive does something based on it.
scope.$watch('varToWatch', function (varToWatch) {
if(attrs.id == varToWatch)
{
//Run my Directive specific code
}
});
However, while this particular design works for most cases, watch is an expensive operation, and having lots of directives watching can really slow down your application.
TL:DR - What is an angular way of getting a directive based on a variable on the directive? (like the one above)?
If you want to get/set values you don't need to fetch the element using jQuery. Angular data binding is the way to do it.
directives is the way to go if you want to do animations or any kind of element attributes and DOM manipulation.
Your code is basically right; the directive should watch something in the $scope and perform it's logic when that thing changes. Yes, watch statements are expensive, and that is a problem once your number of watches start to approach ~2000.
Looking at your code though, I see one problem:
The variable $scope.varToWatch references an id in the template.
When this variable changes, you want something to happen to the element which has this id.
The problem here is in the first point: The controller should know nothing about the DOM, including the id of any element. You should find another way to handle this, for example:
<div my-directive="one"> ... </div>
<div my-directive="two"> ... </div>
<div my-directive="three"> ... </div>
...etc
And in your directive:
scope.$watch('varToWatch', function (varToWatch) {
if(attrs.myDirective == varToWatch)
{
// Run my Directive specific code
}
});
You are very vague as to what you're trying to achieve, but I'll try to answer in context of your last comment.
I have a lot of the same directives (therefore the code will run on all of them), but I need to get only one directive from the lot.
You talk a lot about getting the right element. The directive element is passed to the link function in the directive. If you are not using this element (or children of it) directly, but rather trying to search for the element you want somehow, you are most likely approaching the problem the wrong way.
There are several ways to solve this, I'm sure. If you're thinking about animations, there is already support for that in Angular, so please don't try reinvent the wheel yourself. For other logic, here are two suggestions:
Secondary directive
If the logic you want to apply to this directive is generic, i.e. it could be applied to other directives in your application, you could create a new directive which works together with directives. You can set prioritization in directive in order to control which directive is executed first.
<main-directive ... helper-directive="{{condition_for_applying_logic}}"></main-directive>
jsFiddle example
Expanding main directive
If the logic is tightly coupled to this directive, you can just create a new attribute, either dynamic or static, and bind to it in the directive. Instead of checking 'attrs.id == varToWatch', you check if $scope.apply-logic === 'true' and apply the logic then.
<main-directive ...></main-directive> <!-- Not applied here -->
<main-directive apply-logic="true" ...></main-directive> <!-- Applied here -->
<main-directive apply-logic="{{some.varOnScope}}"...></main-directive> <!-- Conditional -->
Please comment if something is unclear.

Categories

Resources