Угловые выражения в formlyConfig.setType

Question

Самый большой вопрос здесь: почему выражение вроде этого class='{{prodStatusTextColor}}' не обновляется в представлении, если значение переменной scope.prodStatusText действительно получает новые значения?

Пояснение:

У меня есть приложение, которое имеет модель, которая загружается после того, как результаты поиска и может быть изменена с помощью функции истории для загрузки другого набора данных. Функция истории содержится в другой области бабушки и дедушки. Я смог подтвердить, что значения obj, которые я использую для изменений dom, действительно обновляют и удерживают правильные значения, когда они должны (в консоли) при первом загрузке данных и об изменении истории.

Я использую форматированную форму и имею набор шаблонов, содержащий 2-сторонние связанные переменные для изменения стилей и значков на основе других значений полей. Шаблоны следуют:

formlyConfig.setType({ 
    name: 'prodStatus', 
    template: "<label class='control-label'>Production Status</label><br><span class='{{prodStatusTextColor}}'><i class='{{prodStatusStatusIcon}}'></i> &nbsp;&nbsp; <span class='{{prodStatusTextColor}}'>{{model[options.key]}}</span> &nbsp;&nbsp; <!--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'> &nbsp;&nbsp; {{model[options.key] | date:'yyyy-MM-dd'}} &nbsp;&nbsp; </span></div>" 
}); 

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

визуализации 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> &nbsp;&nbsp; <span class="">Inactive</span> &nbsp;&nbsp; <!--i 
class='{{prodStatusInfoIcon}}'></i--></span></div> 
<label class="control-label ng-scope">Production Status</label><br class="ng-scope"> 
<span class=""><i class=""></i> &nbsp;&nbsp; <span class="">Inactive</span> &nbsp;&nbsp; <!--i class='{{prodStatusInfoIcon}}'></i--></span></div> 

парциальное 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 

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

Любые обсуждения или помощь были бы весьма полезными.

Answer 1

Все «код» внутри главного div фактически в новом ребенка объем создаваемого ng-repeat="field in fields " поэтому любые примитивов (например, prodStatusTextColor), которые вы используете в ней слежку (они «скрыть» оригинал переменной после копирования их начального значения).

Вы должны попробовать использовать .точечной нотацию вместо этого, в соответствии с угловым recommandations (проверить это doc на прицелах): вы должны инкапсулировать эти переменные внутри объекта и использовать их в качестве ссылки.

Что-то вроде этого:

в слушателя вы можете иметь:

prodStatus = { 
prodStatusTextColor: agentPersInfoModel.chng.prodStatusTextColor, 
prodStatusStatusIcon: agentPersInfoModel.chng.prodStatusStatusIcon, 
prodStatusInfoIcon: agentPersInfoModel.chng.prodStatusInfoIcon, 
inclTermDate: agentPersInfoModel.chng.inclTermDate, 
isActiveStatus: agentPersInfoModel.chng.isActiveStatus 
}; 

и в разметке вы можете использовать его как это:

<i class='{{prodStatus.prodStatusInfoIcon}}'></i> 

Even проще, вы можете поставить agentPersInfoModel непосредственно в объеме:

scope.agentPersInfoModel = agentPersInfoModel.chng; 

и использовать его в разметке:

<i class='{{agentPersInfoModel.prodStatusInfoIcon}}'></i> 

Надеется, что это помогает!

Код не проверен, но должен выполнять работу.