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="{{imageSrc}} // doesn't work anyway

why there is 2 different syntax for src and hide?

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="{{imageSrc}} // doesn't work anyway

why there is 2 different syntax for src and hide?

• javascript
• angularjs

3 Answers 3

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 es from a javascript variable, then you have to use curly braces to interpolate the string contained into your variable.

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

var ngControllerDirective = [function() {
  return {
    restrict: 'A',
    scope: true,
    controller: '@',
    priority: 500
  };
}];

https://github./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./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. 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.

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.

You can't write because both have different meaning see this link ,It's all about expression and template argument.

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

ng-src=template

You can find it in argument

https://docs.angularjs/api/ng/directive/ngHide

ng-hide=expression

You can also find it in argument