Expression at html tag vs using controller

Question

In angular if I had:

$scope.getA= function(){
// do los stuff
return result;
};
$scope.getB= function(){
// do los stuff
return result;
};
$scope.getC= function(){
// do los stuff
return result;
};
//$scope.getD(), $scope.getE()...    

I have some html elements which "render" depends on a complicate conditions, beside the "readability", is there any performance (render speed) differences at below codes? I ask this question, because the first one takes longer to display all than second... however I'm not sure if this is really true...

    <div ng-if="getA()&&(getB()=="text"?getC():getD())||getE()">hello</div>
//more div tags like this...

and

    $scope.show = function(){
       var bar = getB()=="text"?getC():getD();
       return getA()&&bar||getE();
    }
    //more functions like this...
    <div ng-if="show()">hello</div>
//more div tags like this...

Answer 1

Explains

ngIf directive create a new scope using prototypal inheritance, that means if the attribute isn't found on the ngIf scope it will look into it's prototype objects chain for that attribute, that's $scope controlled by you.

Know let's back to your code samples:

ng-if="getA() && (getB() == 'text' ? getC() : getD()) || getE()"

and

ng-if="show()"

In first sample while executing ngIf would access parent scope 4 times (getA, getB, getC or getD, getE functions),

In second sample only once ( show function), that's cause performance difference.

Conclusion

For your case define method in controller and use it within ngIf directive, but consider possibility to avoid using ngIf at all because it will increase $$watcher counts, just perform DOM manipulation(see angulart.element for more info) without increasing $$watcher counts.

Answer 2

is there any documentation where explains evaluation of a function in html tag

The ng-if directive uses $watch to evaluate the expression. ¹

From the Docs:

  * @ngdoc method
  * @name $rootScope.Scope#$watch
  * @kind function
  *
  * @description

Registers a listener callback to be executed whenever the watchExpression changes.

• The watchExpression is called on every call to ng.$rootScope.Scope#$digest and should return the value that will be watched. (watchExpression should not change its value when executed multiple times with the same input because it may be executed multiple times by ng.$rootScope.Scope#$digest. That is, watchExpression should be idempotent.

-- AngularJS $rootScope.Scope API Reference -- $watch

$digest();

Processes all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

-- AngularJS $rootScope.Scope API Reference -- $digest