formlyConfig.setType中的角度表達式

Question

這裏最大的問題是：如果變量scope.prodStatusText的值確實獲得新值，爲什麼像class='{{prodStatusTextColor}}'這樣的表達式不會在視圖中更新？

說明：

我有了被搜索結果後加載，可以使用歷史記錄功能加載另一個數據集被改變的模型的應用程序。歷史功能包含在另一個祖父母範圍內。我已經能夠確認，我用於dom更改的obj值確實更新並保持正確的值，因爲它們應該（在控制檯中）首次裝載數據和更改歷史記錄。

我正在使用formly-form，並且有一個模板集，其中包含雙向綁定變量以基於其他字段值更改樣式和圖標。 模板如下：

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> 

局部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 

Ť他的歷史功能只是基於id獲取新的代理並將其加載到現有的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> 

即使更簡單，你可能想把agentPersInfoModel直接在範圍：

scope.agentPersInfoModel = agentPersInfoModel.chng; 

，並在標記使用它：

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

希望這有助於！

代碼沒有測試，但應該做的工作。