0

In my template i have :

<div ng-if="$ctrl.show()">
  <input class="form-control" type="text">
</div>

In my component

  show() {
    if (angular.isDefined(this.parking.parkingType)) {
      return this.parking.parkingType.labelKey === 'parking_type.air'
    }
  }

I want angular to process the function only when clicking on a select input (ui-select) by the attribute on-select="$ctrl.show()" :

 <ui-select ng-model="$ctrl.parking.parkingType"
             on-select="$ctrl.show()">
    <ui-select-match allow-clear="true">
        <span>{{ $select.selected.label }}</span>
    </ui-select-match>
    <ui-select-choices repeat="item in $ctrl.parkingType | filter: { label: $select.search }">
        <span ng-bind-html="item.label"></span>
    </ui-select-choices>
  </ui-select>

This case may be similar to a sample case of: launching the function only when clicking on an ng-click

Mouad Ennaciri
  • 1,217
  • 3
  • 15
  • 28

1 Answers1

1

change your ng-show to a variable and keep on-select="$ctrl.show()" as is

In your view:

<div ng-if="$ctrl.shouldShow">
  <input class="form-control" type="text">
</div>

In your component:

$ctrl.show = function() {
  if (angular.isDefined(this.parking.parkingType)) {
    $ctrl.shouldShow = (this.parking.parkingType.labelKey === 'parking_type.air')
  }
}

It's a good practice not to have a function in ng-if, ng-show, and ng-hide because it's a performance hit

Ero
  • 491
  • 1
  • 3
  • 15
  • Angular does not evaluate constantly the variables `$ctrl.shouldShow` ? – Mouad Ennaciri Jul 25 '17 at 15:09
  • sorry, during the digest cycles it will, but evaluating a function obviously will take more time than a boolean, and setting it to a boolean gives you the functionality you need – Ero Jul 25 '17 at 15:11
  • So if I understand, it comes down to the same, Angular goes all the time looking for `$ctrl.shouldShow` if exist or not. What exactly is the difference? – Mouad Ennaciri Jul 25 '17 at 15:14
  • it would help you to read up on the angularjs digest cycle to further understand the difference. – Ero Jul 25 '17 at 15:17