2016-06-03 4 views
3

Возьмите этот код:Должен ли я использовать функцию с угловым ng-отключенным?

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.com/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>

Я предполагаю, что угловые работы, как это:

  • Угловые whatches свойства контроллера, как Condition1.

  • Он читает директивы ng- и прикрепляет их к объектам . Так, если, например, ng-disabled зависит от condition1, , директива оценивается каждый раз, когда условие 1 изменяет значение.

Теперь снова возьмите образец. Он использует 2 условия, но второй не является атрибутом, это функция. Итак, как Angular может узнать, что что-то, что функция возвращается, меняется?

Одно из условий заключается в том, что угловой оценивает все его директивы каждый раз, когда что-либо, связанное с ними или нет, изменяется на модели, но это не очень хорошо для производительности.

Итак, кто-нибудь знает, как Угловая затухает это неуправляемое выражение exg и я должен использовать функцию в этом контексте или нет?

+0

ASAIK оценивает функцию и сравнивает результат. Итак, пока функция довольно дешевая для выполнения (нет вызовов асинхронной связи и т. Д.), Тогда это должно быть хорошо. –

+0

Глядя на ng-disabled docs, он говорит: Эта директива устанавливает атрибут disabled для элемента, если выражение внутри ngDisabled оценивается как правдивое. Таким образом, он оценивает выражение, так что будет включать возвращаемое значение из функции. – rrd

ответ

5

Нет почти никакой разницы. Угловая добавляет часы для всего, что вы используете в своем шаблоне. И он оценивается на каждом цикле дайджест независимо от того, что это переменная или функция.

Таким образом, только накладные расходы в вашем случае - это вызов простой функции.

Обратите внимание на раздел 5.1 Области применения и Цикл дайджеста https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications, как это работает в угловом режиме.

1

Когда угловой просмотр выражения, содержащего только простые значения, он может следить за изменением любой из связанных переменных. Когда он смотрит выражение, которое включает вызов функции, он вызывает функцию в каждом цикле дайджеста.

Как правило, наиболее эффективно просто обновлять флаг каждый раз, когда он изменяется, однако, если у вас есть много мест, которые необходимо изменить, это может быть более чистый код, чтобы просто вычислить значение внутри функции и если удар производительности невелик, перейдите к коду очистки.

Смежные вопросы