If you don't want to put CSS class names into Controller like I do, here is an old trick that I use since pre-v1 days. We can write an expression that evaluates directly to a class name selected, no custom directives are necessary:
ng:class="{true:'selected', false:''}[$index==selectedIndex]"
Please note the old syntax with colon.
There is also a new better way of applying classes conditionally, like:
ng-class="{selected: $index==selectedIndex}"
Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.
However these ways are not functionally equal. Here is an example:
ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.
Why do I have to use "{{title}}" with '@' and "title" with '='?
@ binds a local/directive scope property to the evaluated value of the DOM attribute. If you use title=title1
or title="title1"
, the value of DOM attribute "title" is simply the string title1
. If you use title="{{title}}"
, the value of the DOM attribute "title" is the interpolated value of {{title}}
, hence the string will be whatever parent scope property "title" is currently set to. Since attribute values are always strings, you will always end up with a string value for this property in the directive's scope when using @.
= binds a local/directive scope property to a parent scope property. So with =, you use the parent model/scope property name as the value of the DOM attribute. You can't use {{}}
s with =.
With @, you can do things like title="{{title}} and then some"
-- {{title}} is interpolated, then the string "and them some" is concatenated with it. The final concatenated string is what the local/directive scope property gets. (You can't do this with =, only @.)
With @, you will need to use attr.$observe('title', function(value) { ... })
if you need to use the value in your link(ing) function. E.g., if(scope.title == "...")
won't work like you expect. Note that this means you can only access this attribute asynchronously.
You don't need to use $observe() if you are only using the value in a template. E.g., template: '<div>{{title}}</div>'
.
With =, you don't need to use $observe.
Can I also access the parent scope directly, without decorating my element with an attribute?
Yes, but only if you don't use an isolate scope. Remove this line from your directive
scope: { ... }
and then your directive will not create a new scope. It will use the parent scope. You can then access all of the parent scope properties directly.
The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?
Yes, bidirectional binding allows the local/directive scope and the parent scope to share data. "Expression binding" allows the directive to call an expression (or function) defined by a DOM attribute -- and you can also pass data as arguments to the expression or function. So, if you don't need to share data with the parent -- you just want to call a function defined in the parent scope -- you can use the & syntax.
See also
Best Answer
Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere(Where actually the
ng-transclude
is at) in the directive's template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives.If you write a custom directive you use ng-transclude in the directive template to mark the point where you want to insert the contents of the element
If you put this in your markup
It would show up like:
Full example :
Index.html
jscript.js
Output markup
Visualize :