Why do we use double braces for ng-src in AugularJS? - javascript

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.

Related

Creating dynamic regex match in JavaScript

Is there a way to define a new regex character pattern in JavaScript with NodeJS? For example, a turning /hello\sworld/gm into /{message}/gm, where {message} is interpreted to match "hello world" or whatever other string I decide.
Essentially I'm trying to avoid this:
var message = "hello world";
(new RegExp(message, "gm")).test(someString);
In hopes of getting something like:
/{message}/gm.test(someString);
I'd like to note that it shouldn't work for only the test method. Any method that RegExp uses to match, test, search, etc, should all work. I imagine this would be possible to do if there is a way to override the functions? Or is there a way to edit the RegExp arguments on object creation?
The idea is for me to define {message} as meaning something, and for that to be interpreted globally without having to deal with concatenating a variable into every regex pattern.
I am aware that others have asked about dynamic regexps before. The answer to all of those is to use the RegExp constructor. I am wondering if there is an alternative, possibly like overriding vanilla JavaScript classes.
Also note that I'm not asking whether or not this is good practice. I'm asking whether or not it is possible with or without good practice in mind.
For clarity, {message} should be replaced in every single regex made in any file. So /{message}/ and /bananas:\s{message}/ become /hello\sworld/ and /bananas:\shello\sworld/ respectively, etc etc.
No, it's not possible. The best you can do is create a function which will take a string, replace {message}, create a RegExp object and return it.

Difference between expressions and interpolation markup with embedded expressions in angular

"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

What is $this here in this JavaScript?

I'm looking at JavaScript that produces:
The related code is
My question is, what does $this refer to? Just the keyword "this" I understand, but $this? There doesn't seem to be any jQuery around.
Thanks for any illumination.
It has to do with the Google "jstemplate" mechanism.
From that page:
$this: $this refers to the JsEvalContext data object used in processing the current node. So in the above example we could substitute $this.end for end without changing the meaning of the jscontent expression. This may not seem like a very useful thing to do in this case, but there are other cases in which $this is necessary. If the JsEvalContext contains a value such as a string or a number rather than an object with named properties, there is no way to retrieve the value using object-property notation, and so we need $this to access the value.
It appears to be prefixed with $ due to using the Google JSTemplate API.
More information here: http://code.google.com/p/google-jstemplate/wiki/HowToUseJsTemplate
That is not javascript, it’s HTML.
What you see is a custom element property called jsdisplay that has the value of $this.something. What it actually does is very hard to give an exact answer to, but as some other pointed out it’s probably used internally in google templating.
Pointy is right for this specific case.
To clear up the confusion about $ in JavaScript:
In JavaScript the dollar sign ($) in variable names is treated like a-z, A-Z and underscore (_).
The variable you are looking at, could have been named anything else. $this is no special JS keyword. The developers of jstemplate could have named it foo if they wanted to. Or like they did, something similar to this, like _this or self.

passing paths in an angularjs directive

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'">

javascript $ followed by curly braces

I read a book called "Javascript web application" and it has the following lines of code:
The example below, which includes logic inside views, is something you shouldn’t do:
<div>
<script>
function formatDate(date) {
/* ... */
};
</script>
${ formatDate(this.date) }
</div>
I don't understand what { formatDate(this.date) } means in javascript even in jQuery I have never seen it yet (putting object in jQuery function then I've already seen but the above code is not the case).
Could you explain me what the meaning of it?
Thank you.
${} is a Template Tag, used by jQuery Template Plugin.
${} Template Tag
Used for insertion of data values in the rendered
template. Evaluates the specified field (property) on the current data
item, or the specified JavaScript function or expression.
It's actually a bit more than this: Indeed, the jQuery Template Plugin used to have this syntax ${}. However, currently, this is part of the ES 6 (aka EcmaScript 2015) standard.
Reference: http://exploringjs.com/es6/ch_template-literals.html

Categories

Resources