Angular expressions in formlyConfig.setType - angularjs

Question

The biggest question here is: Why would an expression like this class='{{prodStatusTextColor}}' not be updated in the view if the value of the variable scope.prodStatusText is indeed getting the new values?
Explanation:
I have an application that has a model that is loaded after search results and can be altered using a history function to load another dataset. The history function is contained in another grandparent scope. I have been able to confirm that the obj values that I am using for the dom changes do indeed update and hold the correct values when they should, (in the console) on the first load of the data and on the history change.
I am using formly-form and have a template set that contains 2-way bound variables to change styles and icons based on another fields values.
Templates follow:
formlyConfig.setType({
name: 'prodStatus',
template: "<label class='control-label'>Production Status</label><br><span class='{{prodStatusTextColor}}'><i class='{{prodStatusStatusIcon}}'></i> <span class='{{prodStatusTextColor}}'>{{model[options.key]}}</span> <!--i class='{{prodStatusInfoIcon}}'></i--></span>"
});
//term date
formlyConfig.setType({
name: 'termDate',
template: "<div data-ng-show='inclTermDate'><label class='control-label text-danger'>Termination Date</label><i class=fa fa-lg fa-calendar-times-o></i> <span class='text-danger'> {{model[options.key] | date:'yyyy-MM-dd'}} </span></div>"
});
I tried to use a service and define a default value for the variables as part of an existing model that was working. I could see the value changes but they were not being added to the html. I think they are just not being instantiated by the time the page renders?
Rendered HTML:
<div formly-field="" ng-repeat="field in fields " ng-if="!field.hide"
class="formly-field ng-scope ng-isolate-scope col-sm-6 col-lg-3 col-md-4
formly-field-prodStatus" options="field" model="field.model || model" fields="fields" form="theFormlyForm" form-id="formly_10" form-
state="options.formState" index="$index"><label class="control-label ng-scope">Production Status</label><br class="ng-scope"><span class=""><i class="">
</i> <span class="">Inactive</span> <!--i
class='{{prodStatusInfoIcon}}'></i--></span></div>
<label class="control-label ng-scope">Production Status</label><br class="ng-scope">
<span class=""><i class=""></i> <span class="">Inactive</span> <!--i class='{{prodStatusInfoIcon}}'></i--></span></div>
partial formly obj:
{
className: 'col-sm-6 col-lg-3 col-md-4',
key: 'AGENT_LNAME',
type: 'input',
templateOptions: {
type: 'text',
label: 'Last Name',
placeholder: 'Agent Last Name'
},
expressionProperties: {
'templateOptions.tabindex': '4'
},
watcher: {
expression: function(field, scope) {
return field.formControl && field.formControl.$viewValue;
},
listener: function(field, newValue, oldValue, scope, stopWatching) {
agentPersInfoModel.chng = {
prodStatusTextColor: "text-success",
prodStatusStatusIcon: "fa fa-lg fa-check-circle-o fa-lg",
prodStatusInfoIcon: "fa fa-lg fa-info-circle",
isActiveStatus : false,
inclTermDate : false
};
scope.prodStatusTextColor = agentPersInfoModel.chng.prodStatusTextColor;
scope.prodStatusStatusIcon = agentPersInfoModel.chng.prodStatusStatusIcon;
scope.prodStatusInfoIcon = agentPersInfoModel.chng.prodStatusInfoIcon;
scope.inclTermDate = agentPersInfoModel.chng.inclTermDate;
scope.isActiveStatus = agentPersInfoModel.chng.isActiveStatus;
if(newValue) {
console.log('Function Expression: ' + newValue);
console.log('Field: ');
console.log(field);
console.log('oldValue: ' + oldValue);
console.log(oldValue);
console.log('Scope: ');
console.log(scope);
console.log("agentPersInfoModel.chng");
console.log(agentPersInfoModel.chng);
console.log("agentModel prod status");
console.log(agentModel.singleAgent.PRODUCTION_STATUS);
if(agentModel.singleAgent.PRODUCTION_STATUS === 'Active' && agentModel.singleAgent.TERMINATION_DATE === "00010101") {
agentPersInfoModel.chng.isActiveStatus = true;
agentPersInfoModel.chng.prodStatusTextColor = "text-success";
agentPersInfoModel.chng.prodStatusStatusIcon = "fa fa-lg fa-check-circle-o fa-lg";
agentPersInfoModel.chng.prodStatusInfoIcon = "fa fa-lg fa-info-circle";
agentPersInfoModel.chng.inclTermDate = false;
console.log("============= in the listner (history) =====================");
console.log("we are active");
console.log("agentPersInfoModel.chng.prodStatusInfoIcon");
console.log(agentPersInfoModel.chng.prodStatusInfoIcon);
console.log("agentPersInfoModel.chng.prodStatusStatusIcon");
console.log(agentPersInfoModel.chng.prodStatusStatusIcon);
console.log("agentPersInfoModel.chng.prodStatusTextColor");
console.log(agentPersInfoModel.chng.prodStatusTextColor);
console.log("agentPersInfoModel.chng.inclTermDate");
console.log(agentPersInfoModel.chng.inclTermDate);
console.log("==================================");
} else if(agentModel.singleAgent.PRODUCTION_STATUS === 'Inactive') {
agentPersInfoModel.chng.prodStatusTextColor = "text-warning";
agentPersInfoModel.chng.prodStatusStatusIcon = "fa fa-ban fa-lg";
agentPersInfoModel.chng.prodStatusInfoIcon = " fa fa-lg fa-alert ";
agentPersInfoModel.chng.inclTermDate = false;
console.log("============= in the listner (history) =====================");
console.log("we are inactive");
console.log("agentPersInfoModel.chng.prodStatusInfoIcon");
console.log(agentPersInfoModel.chng.prodStatusInfoIcon);
console.log("agentPersInfoModel.chng.prodStatusStatusIcon");
console.log(agentPersInfoModel.chng.prodStatusStatusIcon);
console.log("agentPersInfoModel.chng.prodStatusTextColor");
console.log(agentPersInfoModel.chng.prodStatusTextColor);
console.log("agentPersInfoModel.chng.inclTermDate");
console.log(agentPersInfoModel.chng.inclTermDate);
console.log("==================================");
} else if(agentModel.singleAgent.TERMINATION_DATE !== "00010101") {
agentPersInfoModel.chng.prodStatusTextColor = "text-danger";
agentPersInfoModel.chng.prodStatusStatusIcon = "fa fa-times fa-lg";
agentPersInfoModel.chng.prodStatusInfoIcon = " fa fa-lg fa-alert ";
agentPersInfoModel.chng.prodStatusCalIcon = " fa fa-lg fa-calendar-times-o ";
agentPersInfoModel.chng.inclTermDate = true;
console.log("============= in the listner (history) =====================");
console.log("we are term'd");
console.log("agentPersInfoModel.chng.prodStatusInfoIcon");
console.log(agentPersInfoModel.chng.prodStatusInfoIcon);
console.log("agentPersInfoModel.chng.prodStatusStatusIcon");
console.log(agentPersInfoModel.chng.prodStatusStatusIcon);
console.log("agentPersInfoModel.chng.prodStatusTextColor");
console.log(agentPersInfoModel.chng.prodStatusTextColor);
console.log("agentPersInfoModel.chng.inclTermDate");
console.log(agentPersInfoModel.chng.inclTermDate);
console.log("==================================");
} else {
agentPersInfoModel.chng.isActiveStatus = false;
agentPersInfoModel.chng.prodStatusTextColor = "text-warning";
agentPersInfoModel.chng.prodStatusStatusIcon = "fa fa-ban fa-lg";
agentPersInfoModel.chng.prodStatusInfoIcon = " fa fa-lg fa-alert ";
agentPersInfoModel.chng.inclTermDate = false;
console.log("============= in the listner (history)=====================");
console.log("we didnt match");
console.log("agentPersInfoModel.chng.prodStatusInfoIcon");
console.log(agentPersInfoModel.chng.prodStatusInfoIcon);
console.log("agentPersInfoModel.chng.prodStatusStatusIcon");
console.log(agentPersInfoModel.chng.prodStatusStatusIcon);
console.log("agentPersInfoModel.chng.prodStatusTextColor");
console.log(agentPersInfoModel.chng.prodStatusTextColor);
console.log("agentPersInfoModel.chng.inclTermDate");
console.log(agentPersInfoModel.chng.inclTermDate);
console.log("==================================");
}
}
}
},
controller: /*#ngInject*/function($scope, AgentPersInfoModel) {
$scope.switchTermColors = function (status) {
};
}
}
console.log:
agentModel prod status
agentPersonalInfoFormly-service.js:221 Inactive
============= in the listner (history) =====================
agentPersonalInfoFormly-service.js:245 we are inactive
agentPersInfoModel.chng.prodStatusInfoIcon
agentPersonalInfoFormly-service.js:247 fa fa-lg fa-alert
agentPersInfoModel.chng.prodStatusStatusIcon
agentPersonalInfoFormly-service.js:249 fa fa-ban fa-lg
agentPersInfoModel.chng.prodStatusTextColor
agentPersonalInfoFormly-service.js:251 text-warning
agentPersInfoModel.chng.inclTermDate
agentPersonalInfoFormly-service.js:253 false
The history function simply fetches a new agent based on an id and loads that into the existing agentModel, does not actually touch these functions, these are supposed to change if the agentModel changes.
Any discussions or assistance would be greatly appreciated.

Answer 1

All the "code" inside your main div is actually in a new child scope created by the ng-repeat="field in fields " therefore any primitives (like prodStatusTextColor) that you use inside it are shadowed (they "hide" the original variable after they copy their initial value).
You should try using the . dot notation instead, as per angular recommandations (check this doc on scopes): you should encapsulate those variables inside an object and use them by reference.
Something like this:
in the listener you may have:
prodStatus = {
prodStatusTextColor: agentPersInfoModel.chng.prodStatusTextColor,
prodStatusStatusIcon: agentPersInfoModel.chng.prodStatusStatusIcon,
prodStatusInfoIcon: agentPersInfoModel.chng.prodStatusInfoIcon,
inclTermDate: agentPersInfoModel.chng.inclTermDate,
isActiveStatus: agentPersInfoModel.chng.isActiveStatus
};
and in the view markup you can use it like this:
<i class='{{prodStatus.prodStatusInfoIcon}}'></i>
Even simpler, you may want to put the agentPersInfoModel directly in the scope:
scope.agentPersInfoModel = agentPersInfoModel.chng;
and use it in the markup:
<i class='{{agentPersInfoModel.prodStatusInfoIcon}}'></i>
Hope this helps!
Code is not tested but should do the work.