I am an AngularJS newbie and trying to figure out what class=ng-binding does in this example:
<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>
I found it here:
http://todomvc.com/architecture-examples/angularjs/#/
I use Chrome and developer tools. Is this an angular keyword? I could not find it in the manual (http://docs.angularjs.org/api/ng.directive:ngBind)
class="ng-binding" is used internally by Angular. For example, looking at the ngBind source we find this line that adds the class and associates the binding with it using .data:
element.addClass('ng-binding').data('$binding', attr.ngBind);
That's why this line of Angular source (noting the double curlys on {{todo.title}} result in an ngBind):
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
Is translated into what you see in the debugger:
<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>
So class="ng-binding" isn't something you should use. You'll find Angular frequently uses classes, comments and other markers- so you'll often see this kind of change between the original html and the Angular processed results.
From the docs:
ng-binding
Usage: angular applies this class to any element that is attached to a
data binding, via ng-bind or {{}} curly braces, for example. (see
databinding guide)
So the class ng-binding is applied by angular dynamically, for the compiler to understand that, element has a data binding associated with it.
As a developer we don't have to worry about that unless we apply some styles to these classes.
Related
I want to use ng-model directive as element rather than as attribute inside tag,is there any way to do it?
well I've already designed my webpage in html and javascript and I want to include it in angularJS using "ng-include". So rather than adding attribute like,
<input type="checkbox" id="checkbox" name='rejectedPartsConfirmtodothis' ng-model="reject">
I want to put it in the format like, (as said in angulaJS documentation )
<ng-model>
<input --->
</ng-model>
but this is not working, any idea how can I make it work?
Quoting the content of the page
Usage
as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-model>
...
</ng-model>
according to v1.5 official documentation : https://docs.angularjs.org/api/ng/directive/ngModel
Usage
as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-model>
...
</ng-model>
I dont really think there would be a use case where you would really need to do this...instead try some alternative but use ng-model as an attribute as ng-model is a pre-defined directive given by angularjs...
You can build a new directive but you cannot modify ng-model to work as an element.
What is the advantage of using "Controller as" syntax in Angular? Is it just to create an alias for a controller or does it have some other technical reasons behind the scenes?
I am new to Angular and want to know more about this syntax.
controllerAs-syntax has multiple advantages:
Clartiy
Consider the following example:
<div ng-controller="containerController">
<h2>Improve your life!</h2>
<p ng-controller="paragraphController">
We talk about {{topic}} a lot, but do we really understand it?
Read this article to enhance your knowledge about {{topic}}
</p>
</div>
Just by reading this piece of code, you can not tell where topic comes from. Does it belong to the containerController, to the paragraphController or is it just a random floating scope variable from sone input above?
By using controllerAs it is very clear:
<div ng-controller="containerController as container">
<h2>Improve your life!</h2>
<p ng-controller="paragraphController as paragraph">
We talk about {{paragraph.topic}} a lot, but do we really understand it?
Read this article to enhance your knowledge about {{paragraph.topic}}
</p>
</div>
You can immediately see that topic is a property of paragraphController. This makes code a lot more readable overall, as it forces the developer to make clear who the functions and variables in the scope belong to.
Binding to properties
When you are using the old controller syntax, strange things can happen when you have multiple bindings in different scopes to the "same" variable. Consider this example:
<form ng-controller="myFormController">
<input type="text" ng-model="somefield">
<div ng-controller="someOtherController">
<input type="text" ng-model="somefield">
</div>
</form>
It looks like both inputs are bound to the same variable. They are not. Everything looks like it works fine when you edit the first input first, but as soon as you edit the second one, they won't sync up anymore. This has to do with the way scope-inheritance and binding work(and there is an excellent answer on this on SO). This does not happen when you bind to object properties (aka when there is a . in your ng-model-attribute). With controllerAs you bind to properties of the controller objects anyways, so it naturally solves that problem:
<form ng-controller="myFormController as myForm">
<input type="text" ng-model="myForm.somefield">
<div ng-controller="someOtherController as other">
<input type="text" ng-model="myForm.somefield">
</div>
</form>
It gets rid of scope(mostly)
The use of scope to create bindings to controllers in old angular code is hard to read, hard to understand and completely unnecessary if you use controllerAs. You no longer have to inject scope into every single controller, in fact you will probably not inject it in any in most applications (you still need to do so if you want to use the angular event system). This results in cleaner controller-code with less strange boilerplate.
It prepares for Angular 2
In angular 2, scope will be gone and we will write everything as components. Using controllerAs lets you work without scope and forces you to think more component-oriented, thus preparing you (and the applications you eventually will want to migrate) for the 2.0 update.
I'm having trouble using one way binding in directives with an isolate scope.
If I use an equal sign for two-way binding, and use the data like so: {{d.name}}, it works.
If I use an # sign, it doesn't work. If I use an equal sign and use the data like so: {{::d.name}}, it fails also.
You can see my full example at this plunker: http://plnkr.co/edit/8bUl8pZSV8Ryru6GDq2M?p=preview
Can someone please help me understand what's happening here? Thanks.
The one-way binding syntax you are trying to use, has been introduced since Angular 1.3.
In your demo you are using version 1.2.25.
You must change the script link:
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.2.25"></script>
The problem with the second directive, instead, is that the # is not a one-way binding, it simply takes the attribute as text.
To use it like you would, so you need to interpolate the text before passing it to the directive, like this
<h3>Directive 2</h3>
<p ng-repeat="d in data">
<dir2 d="{{d.name}}"></dir2>
</p>
DEMO
Several times when creating or customizing a directive (either my own directive or for example https://github.com/dpiccone/ng-pageslide) I get a point where all the display logic is controlled by a single css class. At that point the directive boils down to adding and removing a single class. So instead of using a new directive I can simply use the ng-class directive (see an example here: https://gist.github.com/Hypercubed/8f40556eb0f6eddbcca3). Is there an advantage to the custom directive approach vs the ng-class/CSS styles approach? I guess the custom directive doesn't depend on $animate? Am I just doing it wrong?
Sorry for another directive vs. XXX question.
I think you're failing to see the forest for the all tress. You're focusing on a very minute detail and missing the larger picture. Directives are more than simply applying styles. I think an example is best. For example, take the rating directive. If you wanted to render a star rating model it might look like this:
<div ng-rating="album.rating" max="5"></div>
That may add the following to the DOM:
<ul class="inline">
<li ng-repeat="i in max">
<i ng-class="{ 'icon-start-empty': i > rating, 'icon-star': i <= rating }"></i>
</li>
</ul>
Under the covers ng-class it utilized, but that is only a part of the logic encapsulated in the rating directive. It allows the user to configure how many stars the rating is out of, and renders the same number of li elements. Then because you wrote a directive it allows you to reuse this logic where ever it's required. Using ng-class only works in that 1 location. If you want to do the same thing you're copying code which is a sign maybe you want to wrap that logic up in a directive.
I'm building a reasonably non-trivial Angular-js application for the first time and am trying to establish some intuition about how to get things done. Most things are making sense, but there's one pattern in particular that has me stumped -
Whenever I place an "include" style directive inside an ng-switch, it is ignored. I've experimented with just about every style of ng-switch, ng-include, and ng-transclude I can think of to achieve the desired behaviour, but to no avail. I haven't noticed any documentation indicating that this would be disallowed, nor any equivalent style of pattern.
Here is an example of what I have tried to do:
<div ng-switch="is_logged_in()">
<div ng-switch-when="true">
logged-in:
<div ng-include="'views/logout.html'"> </div>
</div>
<div ng-switch-default>
not-logged-in
</div>
</div>
The expected behaviour being that the logout form is displayed when $scope.is_logged_in() returns true.
The behaviour I see is that "logged-in:" is displayed, but the include isn't.
I've tried various versions of Angular-js. I've inspected the network traffic and seen that the include is in-fact being fetched, but I can't get this to work. I've had the same behaviour manifest when trying to build my own template control structures using directives.
The way I've seen most examples dodge this is by using JS in a directive to manually show/hide various sections of the transcluded content - is this really the idiomatic way to get the behaviour I'm looking for?
Thanks!
While using ng-include I always assign the path to a variable in controller.
$scope.logoutlink ='views/logout.html'
And in the view you can assign as
<div ng-include="{{logoutlink}}"> </div>
It would be helpful to post a JSfiddle link.