Several javascript API functions call depricated $apply and cause errors

Products

• CA Service Catalog
• CA Service Management - Asset Portfolio Management
• CA Service Management - Service Desk Manager

Issue/Introduction

When using :
ca_fdHideField(s)
ca_fdShowField(s)
ca_fdEnableField(s)
ca_fdDisableField(s)

The code used by Catalog looks like :

scope.disable = function(){
                       scope.field.disabled = true;
                       scope.$apply();
                   }

You can find this code in about all the file located in \scripts\catalogux\common\components\form\fields

Using $apply results in an exception :
ca_fdShowFields: Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.5.7/$rootScope/inprog?p0=%24apply
    at angular.js:1
    at gK (angular.js:1)
    at gA.$digest (angular.js:1)
    at gA.$apply (angular.js:1)
    at gA.scope.show (LabelDirective.js:78)
    at String.<anonymous> (FormAPIs.js:288)
    at Function.each (eval at <anonymous> (jquery-1.11.2.js:2), <anonymous>:2:3005)
    at window.ca_fdShowFields (FormAPIs.js:282)
    at Object.showLabel (eval at switchFdScope (formdesigner.js:502), <anonymous>:3:12)
    at eval (eval at evalJsFunction (formdesigner.js:581), <anonymous>:1:10)

As per stackoverflow, using $apply should be avoided and $evalAsync should be used instead. One other dirty solution is to wrap the $apply into a settimeout with 0ms. Wich is what your devs did in LookupField.js. 

Replacing $apply with $evalAsync and everything works fine.

Cause

As per stackoverflow, using $apply should be avoided and $evalAsync should be used instead.

Environment

Release:
Component: USVCT

Resolution

t6d9357 Or 17.1 RU1, or 17.2 GA

Additional Information

to reproduce :

Create 3 labels with those ids: [“lbl_clickme”, “lbl_showme”, “lbl_showme2”]

In the lbl_clickme parameters, add this function: ca_fd.js.showLabel() in the onClick field.

 

Hide those labels in the form: [“lbl_showme”, “lbl_showme2”]

In the form script section, add this following code:

{
     showLabel: function() {
    ca_fdShowFields(ca_fd.formId, ["lbl_showme", "lbl_showme2"])
      }
}

Current behavior:

When you click on the clickme label, The first lbl_showme will appear as expected. However, an exception is triggered and the second label will be ignored with this error in the console :

ca_fdShowFields: Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.5.7/$rootScope/inprog?p0=%24apply
    at angular.js:1
    at gK (angular.js:1)
    at gA.$digest (angular.js:1)
    at gA.$apply (angular.js:1)
    at gA.scope.show (LabelDirective.js:78)
    at String.<anonymous> (FormAPIs.js:288)
    at Function.each (eval at <anonymous> (jquery-1.11.2.js:2), <anonymous>:2:3005)
    at window.ca_fdShowFields (FormAPIs.js:282)
    at Object.showLabel (eval at switchFdScope (formdesigner.js:502), <anonymous>:3:12)
    at eval (eval at evalJsFunction (formdesigner.js:581), <anonymous>:1:10)