使用花括号时的角度

Question

有时在角形中我看到花括号，但有时没有。我搜索了很多，但找不到正确的问题

带花括号

ng-src="{{imageSrc}}

不带花括号

ng-hide="imageSrc"

我要问的是为什么我们不能写ng-hide为

ng-hide="{{imageSrc}} // doesn't work anyway

为什么src和hide有2种不同的语法？

Answer 1

它仅取决于“声明”所使用指令的方式。

如果指令具有以下声明：

scope:{
    ngHide: '='
}

那么，您不必使用双胡须，因为该指令需要一个对象

如果指令的声明如下：

scope:{
    ngMin:'@'
}

然后，它期望一个值。 如果您的值来自javascript变量，则必须使用花括号将包含在变量中的字符串插入。

编辑：

自从我阅读有角度的源代码以来已经有很长时间了。

我尚未找到任何源代码来证明我的观点：

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

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

Answer 2

因为它们意味着两种不同的含义。 使用此功能时：

<span data-ng-bind="test">

这意味着角度将进入范围并以测试为关键从那里获得价值。 因此，值将是$ scope.test。 但是属性值将是“测试”

使用时

ng-src="{{imageSrc}}

然后将评估值并将其放置到属性中。 因此，值将为$ scope.imageSrc，属性值将为$ scope.imageSrc。

但。 并非所有标签都可以等待评估。 他们认为值{{}}是正确的，不会更改。 这导致错误的请求。 为了解决这个问题，创建了ng-src。

Answer 3

您无法编写代码，因为两者含义不同，请参阅此链接，这全都与表达式和模板参数有关。

https://docs.angularjs.org/api/ng/directive/ngSrc

ng-src=template

你可以在参数中找到它

https://docs.angularjs.org/api/ng/directive/ng隐藏

ng-hide=expression

您也可以在参数中找到它