使用花括號時的角度

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

您也可以在參數中找到它