"Angular directive attributes take either expressions or interpolation markup with embedded expressions. It is considered bad practice to embed interpolation markup inside an expression".
I couldn't understand the difference between expressions and interpolation markup with embedded expressions. Please can someone explain ? I am new to angular.I checked the documentation but couldn't find the difference.
An expression would be the "myscope" in ng-model="myscope"
And you can also do custom attributes like my-att="{{myscope}}"
edit: these expressions in curly braces are interpolated, meaning not the expression itself but its value gets passed into the directive. Your directive will thereby not have direct access to the scope property you used for the interpolation.
But you should not mix the two like ng-model="my{{scope}}"
I think that is what it refers to. This will often not work, since the scope is not yet initialized when the directive is parsed
Expression refers to Angular expression that may or may not contain double curly braces whereas interpolation markup means code inside this curly braces.
Expression {{exp}}: Something that turns into some value.
Characteristics:
It is processed by angular.
Angular expression are tied to the scope they are in. It has access to the properties of $scope.
Doesn't throws error if it has type error.
Control flow function(e.g., 'If', 'else' statement etc) not allowed.
Accept filter or a filter chain to format the output.
Interpolation (process): Process of replacing placeholders in a string with values.
Characteristics:
In Angular, these placeholders are usually expressions.
Result is automatically updated when placeholder changes. If $scope.message changes so will interpolation result will change.
Ex:
My name is {{ message }}
It is interpolated to: My name is Harry Potter
Related
Is it possible to create a tag function when the template literal is a variable?
e.g. instead of this
render`<h1>Hello World</h1>`
Is there any way to do this?
const template = `<h1>Hello World</h1>`
render(template)
No, that's not possible. Tagged templates are a special syntax where render will get called with a string array and all the ${value} values. By storing it in a variable like that, the template literal is instead interpreted as a regular template literal to be converted to a string instead of a function call.
Of course, if all your render function does is concatenation of the template and its variables, it doesn't matter. But mind that the variables inside the template literal are already evaluated when you store it in a variable, it can't get re-evaluated later.
I'm wondering if there's a Angular2 equivalent to the bracket notation in Javascript that lets you use variables to select an object property. Or a way of doing the same thing.
Consider this code:
let selector = "foo";
let someObject = {foo: "some content", guu: "some other content"};
console.log(someObject[selector]); //bracket notation, logs "some content"
I've tried the following in Angular2:
{{someObject[selector]}}
{{someObject['selector']}}
Neither worked. Is there another way of doing it without Javascript?
This appears to work just fine in Angular: https://stackblitz.com/edit/angular-mrky5n.
Some reasons that it may not be working in your current application:
1) If selector is a variable with a string selector in it, perhaps that selector variable is not available to the scope of the template (e.g. it's private on the component class, defined within a method, or lifecycle hook, etc.
2) If selector is the property you actually want to access, perhaps there is a typo in the name of selector -- maybe the real property is selectro or selecter. This is a reason to not use this approach, since you lose Typescript's type checking. someObject.selectorr throws an error while someObject['selectorr'] goes through fine.
3) That property has not received a value yet -- maybe the safe navigation operator would help.
Angular template syntax supports many JS features, including bracket notation.
{{someObject[selector]}} expression assumes that both someObject and selector are component properties. This won't work if they are local variables that are defined with let.
I'm confused about AngularJS expressions.
From w3schools.com, I learned that
AngularJS expressions can be written inside double braces: {{ expression }}.
AngularJS expressions can also be written inside a directive: ng-bind="expression".
But why do we use ng-src={{...}} instead of ng-src="..."?
Is the ng-src a special case when dealing with AngularJS expressions?
Yes, it is a special case for ng-src, as it is waiting for a template parameter, which is a string with any kind of interpolation inside ({{}}), as stated in the docs.
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
This depends on how the directive is specified by itself.
This has sort of been asked already, referring to this question might be helpful
Difference between double and single curly brace in angular JS?
You can use both.
When you are binding certain dynamic values at that time use like this.
ng-src="{{myVar}}"
When you are binding static values at that time use like this.
<img ng-src="string"></img>
Hope this will make you clear.
New to angular. Trying to understand the proper way to do things
I am trying to create a directive that will run custom logic when a user clicks on a link before moving to the next page. However, before I can even get to the custom logic I'm having difficulty setting up the directive. I want to be able to:
A) Have certain attributes on the directive be optional (set to different defaults in certain cases)
B) Have a user be able to pass a string literal OR a variable from the controller's scope into the directive's attributes to be used on the directive's scope.
My Problems:
1.) If I use string literals in the directive's attributes, the corresponding $scope property is undefined. I have to access it through the $attrs. This isn't the worst thing but seems like a wrong practice to have to check the $scope.Prop and if it is undefined check $attrs.Prop.
2.) Also, this answer seems to say I need to use single quote when using string literals in the attributes but that behavior does not work in my example.
3.) When I have certain attributes on the directive not set, the default value I set on the $scope in the 'controller' function on the directive is not reflected when rendered. I cannot figure out why.
Code in Plnkr
Any help would be appreciated!
Here is a version where all three cases work:
The literals work without anything special
The scope values work using the usual {{ expression }} syntax
Defaults are provided in the directive's template using this syntax href='{{strHref || 'default href'}}' which I found in this thread.
Here is the full directive definition:
return {
restrict: 'E',
replace: true,
scope: {
strHref: '#link',
strText: '#displayText',
},
template: '<div><div>variables: {{strHref || \'default href\'}}, {{strText || \'default text\'}}</div> result: {{strText || \'default text\'}}<span ng-show="blnIsBackButton"> (Return)</span></div>',
};
Link : http://plnkr.co/edit/RB6shHI0xYa1FkP4eXDy
Scope & can be used for literals /expression. Scope = for setting up 2 way binding and scope = for method call.
You can set default value for property in controller if you want
I think directive name has to be lower case. Can someone confirm this? If i use pageLink it does not work but works for pagelink. (note 'L'). Same for property.
There are some nice videos about scope in http://www.egghead.io/.
I created this in Plunker which uses all 3 scope isolation types
I have a directive which i'd like to pass a path
<mydirective api="/my/tomcat/server?asd=123&efg=456">
However I get "Lexer Error: Unexpected next character". I assume some encoding needs to take place. Can someone advice?
I'm not sure why you are getting the lexer error without seeing your code, if you could update the post, we may be able to tell why that happens. In the meantime, there are a few ways to retrieve an attribute value in your directive. Not all will work with a string literal.
1) The # isolate scope binding: This parses the value and will work as is with your HTML. The parse actually happens later so this value will not be immediately available in the directive's internal methods (i.e. link, etc.) and is best used in the directive's template method. Ex.:
scope: {
api: '#'
}
2) The = isolate scope binding: This will work if you wrap your expression in single quotes because it evaluates the attribute as an expression. Ex.:
scope: {
api: '='
}
And in your HTML (notice the single quotes):
<mydirective api="'/my/tomcat/server?asd=123&efg=456'">
3) Attribute Evaluation: This allows you to evaluate the attribute string value directly from the directive's internal methods and will work as is with your HTML. Ex:
link: function(scope,element,attrs){
console.log(attrs.api);
}
You can read more about directives in the AngularJS directive doc here.
Angular try to evaluate the expression in the api attribute, you have to surround it with quotes :
<mydirective api="'/my/tomcat/server?asd=123&efg=456'">