javascript - Should I use a function on angular ng-disabled? - Stack Overflow

admin管理员组

文章数量:1289875

Take this code:

var app = angular.module('test', []);

app.controller("controller", function() {
  this.hello = "Hello world";
  this.condition1 = true;
  this.condition2 = true;
  this.check_condition2 = function() {
    return this.condition2;
  }
});

<script src=".2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="controller as ctrl">
  {{ctrl.hello}}
  <br>
  <label>
    <input type="checkbox" ng-model="ctrl.condition2">Condition2</label>
  <br>
  <button ng-disabled="ctrl.condition1 && ctrl.check_condition2()">My BTN</button>
</div>

Take this code:

var app = angular.module('test', []);

app.controller("controller", function() {
  this.hello = "Hello world";
  this.condition1 = true;
  this.condition2 = true;
  this.check_condition2 = function() {
    return this.condition2;
  }
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="controller as ctrl">
  {{ctrl.hello}}
  <br>
  <label>
    <input type="checkbox" ng-model="ctrl.condition2">Condition2</label>
  <br>
  <button ng-disabled="ctrl.condition1 && ctrl.check_condition2()">My BTN</button>
</div>

I asume that angular works like this:

• Angular whatches the controller's properties like condition1.

• It reads the ng- directives and attaches the right ones to the properties. So if, for instance, ng-disabled depends on condition1, the directive is evaluated every time condition1 changes value.

Now take the sample above again. It is using 2 conditions but the second is not an attribute, it is a function. So how can Angular know that something that function is return changes?

One posibilty is that angular evaluates all its directives every time anything, related to them or not, changes on the model, but that doesn't sound very good for performance.

So, does anyone know how Angular whatches this ng-disabled expresion and wether I should use a function in that context or not?

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow asked Jun 3, 2016 at 7:40 VandervalsVandervals 6,06477 gold badges5353 silver badges101101 bronze badges 2

• ASAIK, it evaluates the function and pares the result. So, as long as the function is fairly cheap to execute (no async calls etc), then it should be fine. – Davin Tryon Commented Jun 3, 2016 at 7:42
• Looking at the ng-disabled docs it says: This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy. So it's evaluating the expression, so that would include the return value from the function. – rrd Commented Jun 3, 2016 at 7:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

There's almost no difference. Angular adds a watch for everything you are using in your template. And it's evaluated on every digest cycle no matter wheter it's a variable or a function.

So the only overhead in your case is the call for a simple function.

Have a look at section 5.1 Scopes and the Digest Cycle of https://www.airpair./angularjs/posts/angularjs-performance-large-applications for how this works in angular.

When angular is watching an expression that only contains simple values it can watch for any of the related variables to change. When it is watching an expression which includes a function call it calls the function on every digest loop.

It will usually be most efficient to simply update a flag every time it changes, however if you have a lot of places that the flag would need to be changed it can be cleaner code to just calculate the value inside a function and if the performance hit isn't large go for the cleaner code.

本文标签： javascriptShould I use a function on angular ngdisabledStack Overflow