Looking at Mastering Web Application Development in Angular, I tried to use the ng-if Directive to not show a <div> if an expression was false.
HTML
<div ng-controller="MyCtrl">
<div ng-if="showSecret">Secret</div>
</div>
JavaScript
var myModule = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.showSecret = (function() {
return false;
})();
}
But, looking at this JsFiddle(http://jsfiddle.net/64GCp/2/), I see that Secret gets rendered. Why?
It looks like you are using v1.0.1 and documentation here doesn't show an ngIf document.
The first instance of it I see is here in version 1.2.0
Changing the library version works: http://jsfiddle.net/64GCp/4/
The version of angular you are using does not support ng-if. Use a newer version. See my fiddlehttp://jsfiddle.net/SdYH5/
The options to hide and show are ng-show or ng-hide and later in version Angularjs 1.2.0+ ngIf
http://jsfiddle.net/64GCp/3/
All directives are executed over the DOM and therefore both ngShow or ngIf will be executed equally.
I have personally used ngShow in a page a large number of times(I decided to used "large number" to highlight the ambiguity) and tested it in all browsers including IE8 with no problems at all.
What the book is probably referring to is that the size of the page will not change because all ngShow/ngHide does is to hide the element:
ng-show output
<div ng-show="showSecret" style="display: none;">Secret</div>
While ngIf only leaves a comment:
ng-if output
<!-- ngIf: checked -->
Important: the first stable version to add ng-if was angular 1.2.0 make sure you have this version or higher before planning to use it.
Please understand 2 things, Angular is rapidly changing framework and so are the browsers it is always a good practice to search for benchmarks/versions to confirm or discard features. It is also possible that the internal functionality of directives may change overtime. For instance Angular Team announced that they dropped IE8 support in version 2.0.
Related
I'm using Angular(1.6.4), and I'm lost as how to change a component from being visible to invisible and vice-versa. For instance, I have this component where I would like to programmatically modify its visibility:
When I go looking for documentation, I see that there is an "ng-hide" command, but that's for the old version of Angular and I'm not able to find how it's done in the current version (1.6.4)
Any help is greatly appreciated.
I'm not sure where you've found that ng-hide is only for old versions of Angular.
ngShow and ngHide directives work fine in version 1.6.4, so feel free to use them for your needs.
Recently I have been coming across a lot of repetition in Angular.
Example:
ngShow vs ngHide
Pristine vs Dirty
valid vs invalid
Won't ng-show="!condition" and ng-show="condition" cover all cases for showing and hiding content within the view?
Having both ngShow and ngHide directive seems in AngularJs as pointless as having an if and an ifNot statement in JavaScript.
Is there a reason for doing this? When should custom directives be written like this?
Let's say I have the following html in which masterdir and innerdir are custom directives:
<div master-dir>
<div inner-dir ng-repeat="x in set"></div>
</div>
How can I make the directives execute in the following order (without using $timeout, 'cause it looks ugly to me):
ng-repeat
n times innerdir
masterdir
Background: I want to alter the dom in every directive and the directives kind of depend on each other (the innerdir should alter the dom that ng-repeat produces and the masterdir should alter the dom produced by innerdir)
I've tried it with priority, require and pre/post/compile but I didn't find the right mix. I'm really out of ideas at this point.
In https://docs.angularjs.org/guide/compiler they say that, but none chart is there. Anyway, I found that in each directive docs page, in Directive Info section, the priority appears wrote like that (for ng-repeat):
ng-repeat:
Directive Info
This directive creates new scope.
This directive executes at priority level 1000.
I also found the next link that seems to be very helpful. I´m still reading it trying to learn (didn´t know too much about angular priorities). Hope this is helpful for you too.
http://www.bennadel.com/blog/2447-exploring-directive-controllers-compiling-linking-and-priority-in-angularjs.htm
So I've been playing around with Ionic Framework (and Angular, by extension) recently - but I have encountered a hitch.
Essentially, I want to be able to define tabs along the bottom of the application using a model.
Here's what I have so far:
tabs.html
<div ng-repeat="tab in tabs">
<ion-tab title="{{tab.title}}" icon-off="{{tab.icon}}" icon-on="{{tab.iconon}}" href="{{tab.link}}">
<ion-nav-view name="{{tab.controller}}"></ion-nav-view>
</ion-tab>
</div>
controller.js
$scope.tabs = [
{
title:'Home',
icon:'ion-ios7-pulse',
iconon:'ion-ios7-pulse-strong',
link:'#/tab/dash',
controller:'tab-dash'
}
]
Everything in the ion-tab element works and replaces fine, however, {{tab.controller}} in the ion-nav-view element does not.
I've tried rearranging the elements to see if it makes a difference to what is replaced, but it does not - no matter the order, the ion-tab attributes are replaced by the templating engine, but the ion-nav-view attributes are not.
It's not just the 'controller' hash either, {{tab.title}} is equally not-replaced when present in the ion-nav-view element - also, {{tab.controller}} works in the ion-tab element.
The main thing I noticed was that when the application was served to a browser, the DOM was different for 'ion-nav-view' to what I observe in the editor - which indicates that it might be doing some behind-the-scenes magic. I considered that maybe this magic is causing Angular tags in the element to not be parsed/detected/overwritten for some reason.
If this is the case, is there a way to force Angular to do its templating before any other JavaScript occurs - and if not, does anybody know what is happening here? I'm kinda stumped.
Thanks in advance :)
Fixed it.
Turns out this is by design - according to the Ionic team, having the view model name be dynamic causes issues. I have worked around this by just manually specifying each of the tabs I wanted to use and referring to the appropriate field for each in my model.
Not DRY, not elegant - but functional.
I have a rather simple select box in angular JS. I am trying to add a class to toggle/hide the individual elements. I have tried in various ways and I am simply not getting something about angular js.
<select ng-class="{hide: user.student == false}" class="btn-blockAddress" ng-model="docs.address.type" ng-options="t for t in consts.data.typeOfAddress"></select>
<select ng-class="{hide: user.student != false}" class="btn-blockAddress" ng-model="docs.address.type" ng-options="t for t in consts.data.typeOfAddressForStudent"></select>
This is not working for me. It disables one, and not the other select, but then when I change user.student, I expect them to swap, but there is no change.
Should I be defining the behavior of the DOM form some other location? I understood the purpose of angular js was to watch variables for change. I have based my code on similar use in other parts of the codebase.
How do I inspect the value of user.student at the point it is evaluated to decide the class?
The javascriptish statements that go in directives are not really javascript - so what is it?
I have found the docs for angular js pretty good to show specific use cases, but I can not find clear API info that I can lookup.
There is a plugin for the dev tools called Batarang that is life saving. Check out this video for usage.