AngularJS组件初始绑定height值未传递给模板内summernote指令问题

问题原因与解决方法 #

1. 绑定值类型不匹配 #

你在调用组件时写的height="400"，对于AngularJS 1.x的<?单向输入绑定来说，会直接将引号内的内容作为字符串传入，此时组件内拿到的$ctrl.height是字符串"400"，而summernote的height参数要求传入数值类型，因此无法识别该配置。
解决方法：调用组件时通过插值表达式传入数值，修改调用代码为：

<my-comp height="{{400}}" ng-model="$ctrl.someOtherCtrl"></my-comp>

2. 配置优先级冲突 #

你给summernote指令同时传入了单独的height属性和config配置项，几乎所有Angular版summernote封装的默认逻辑中，config内的配置优先级高于单独的行内属性。如果chSummernoteService.getOptions返回的配置中已经包含默认height，就会直接覆盖你传入的行内height属性。
解决方法：将height参数合并到config配置中即可，修改对应代码：

• 修改控制器onInit逻辑，把height加入config：

function onInit() {
  const ctrl = this;
  ctrl.options = ctrl.chSummernoteService.getOptions({
    noExternalFonts: ctrl.noExternalFonts,
    height: ctrl.height // 新增行，将组件接收的高度参数加入配置
  });
}

• 模板中可以移除单独的height属性：

function getTemplate() {
  return `<summernote ng-model="$ctrl.ngModel" config="$ctrl.options"></summernote>`
}

该问题不属于AngularJS或者summernote的bug，是参数类型匹配和配置优先级的常规逻辑导致的。

内容的提问来源于stack exchange，提问作者goldylucks