[英]angular when to use curly brackets
In angular sometimes i have seen curly brackets but some times not.i search a lot but i couldn't find correct question 有时在角形中我看到花括号,但有时没有。我搜索了很多,但找不到正确的问题
with curly bracket 带花括号
ng-src="{{imageSrc}}
without curly bracket 不带花括号
ng-hide="imageSrc"
what i'm asking is why we cannot write ng-hide
as 我要问的是为什么我们不能写
ng-hide
为
ng-hide="{{imageSrc}} // doesn't work anyway
why there is 2 different syntax for src
and hide
? 为什么
src
和hide
有2种不同的语法?
It simply depends on the way the directive you are using is "declared". 它仅取决于“声明”所使用指令的方式。
If the directive has the following declaration: 如果指令具有以下声明:
scope:{
ngHide: '='
}
then, you don't have to use double mustaches because the directive expects an object 那么,您不必使用双胡须,因为该指令需要一个对象
If the directive is declared like the following : 如果指令的声明如下:
scope:{
ngMin:'@'
}
then, it expects a value. 然后,它期望一个值。 If your value comes from a javascript variable, then you have to use curly braces to interpolate the string contained into your variable.
如果您的值来自javascript变量,则必须使用花括号将包含在变量中的字符串插入。
EDIT : 编辑:
It has been a long time since I read angular source code. 自从我阅读有角度的源代码以来已经有很长时间了。
I haven't found any source code to prove my point : 我尚未找到任何源代码来证明我的观点:
ngController
which expects a string is declared like the following ngController
需要一个字符串,如下所示
var ngControllerDirective = [function() {
return {
restrict: 'A',
scope: true,
controller: '@',
priority: 500
};
}];
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngController.js#L3 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngController.js#L3
ngMaxLength
var maxlengthDirective = function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
var maxlength = -1;
attr.$observe('maxlength', function(value) {
var intVal = toInt(value);
maxlength = isNaN(intVal) ? -1 : intVal;
ctrl.$validate();
});
ctrl.$validators.maxlength = function(modelValue, viewValue) {
return (maxlength < 0) || ctrl.$isEmpty(viewValue) || (viewValue.length <= maxlength);
};
}
};
};
https://github.com/angular/angular.js/blob/master/src/ng/directive/validators.js#L186 https://github.com/angular/angular.js/blob/master/src/ng/directive/validators.js#L186
Beacuse they mean two different things. 因为它们意味着两种不同的含义。 When you use this:
使用此功能时:
<span data-ng-bind="test">
This means that angular will go to the scope and get value from there with test as key. 这意味着角度将进入范围并以测试为关键从那里获得价值。 So value will be $scope.test.
因此,值将是$ scope.test。 But attribte value will be "test"
但是属性值将是“测试”
When you use 使用时
ng-src="{{imageSrc}}
then value will be evaluated and placed to the attribute. 然后将评估值并将其放置到属性中。 So value willbe $scope.imageSrc and attribute value will be $scope.imageSrc.
因此,值将为$ scope.imageSrc,属性值将为$ scope.imageSrc。
But. 但。 Not all tags can wait for evaluation.
并非所有标签都可以等待评估。 They think that value {{}} is correct and will not be changed.
他们认为值{{}}是正确的,不会更改。 This cause to bad request.
这导致错误的请求。 To fix this problem ng-src was created.
为了解决这个问题,创建了ng-src。
You can't write because both have different meaning see this link ,It's all about expression and template argument. 您无法编写代码,因为两者含义不同,请参阅此链接,这全都与表达式和模板参数有关。
https://docs.angularjs.org/api/ng/directive/ngSrc https://docs.angularjs.org/api/ng/directive/ngSrc
ng-src=template
You can find it in argument 你可以在参数中找到它
https://docs.angularjs.org/api/ng/directive/ngHide https://docs.angularjs.org/api/ng/directive/ng隐藏
ng-hide=expression
You can also find it in argument 您也可以在参数中找到它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.