这里最大的问题是：如果变量class='{{prodStatusTextColor}}'的值确实获得新值，为什么在视图中不会更新像scope.prodStatusText这样的表达式？
解释
我的应用程序具有在搜索结果之后加载的模型，并且可以使用历史记录功能更改以加载其他数据集。历史功能包含在另一个祖父母范围内。我已经能够确认我用于dom更改的obj值确实在第一次加载数据和历史记录更改时（在控制台中）更新并保持正确的值。
我使用的是formly-form，并且有一个包含双向绑定变量的模板集，可根据其他字段值更改样式和图标。 模板如下：
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>"
});
我尝试使用服务并为变量定义默认值，作为现有模型的一部分。我可以看到值的变化，但它们没有被添加到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> <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>
部分形式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发生更改，这些函数应该会发生变化。
非常感谢任何讨论或协助。
答案 0 :(得分：0)
所有＆＃34;代码＆＃34;您的主div内部实际上是ng-repeat="field in fields "创建的新子范围，因此您在其中使用的任何基元（如 prodStatusTextColor ）都是阴影（他们＆＃34;隐藏＆＃34;复制初始值后的原始变量）。
您应该尝试使用. 点符号，根据角度推荐（在范围内检查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>
希望这有帮助！
代码未经过测试但应该开展工作。