angularjs组件控制器未将初始绑定值传递给模板中的指令（summernote）

Posted 2023-03-22

【中文标题】angularjs组件控制器未将初始绑定值传递给模板中的指令（summernote）

【英文标题】：angularjs component controller not passing initial binding value to directive in template (summernote)

【发布时间】：2021-09-01 14:03:34

【问题描述】：

我有一个相当简单的 angularjs 组件，它有一个可选的高度绑定：

"use strict";

angular
  .module("app")
  .component("myComp", getComp());

function getComp() 
  return 
    bindings: getBindings(),
    template: getTemplate(),
    require: "ngModel",
    controller,
  ;


function getBindings() 
  return 
    height: "<?",
    noExternalFonts: "<?",
    ngModel: "=",
  


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


function controller(chSummernoteService) 
  const ctrl = this;
  ctrl.chSummernoteService = chSummernoteService;
  ctrl.$onInit = onInit.bind(ctrl);


function onInit() 
  const ctrl = this;
  ctrl.options = ctrl.chSummernoteService.getOptions(
    noExternalFonts: ctrl.noExternalFonts,
  );

问题是，当我调用它时，summernote 忽略了高度，模板中的指令，即使其他两个属性 ng-model 和 options 工作正常。

<my-comp  ng-model="$ctrl.someOtherCtrl></my-comp>

我还检查了模板中的$ctrl.height 是否使用硬编码数字，并且确实有效。

这是我不知道的一些 angularjs 怪癖吗？ （我是 angularjs 新手，来自 React）

或者这可能是 Summernote 指令中的错误？

提前感谢您的帮助！

【参考方案1】：

我检查了 angular-summernote src，它似乎被窃听了。他们的控制器编写不正确，因此无论如何它都会读取height 属性的原始字符串值，因此它按字面意思解释为"$ctrl.height"。它还以这样一种方式编写，即使您尝试在插值绑定之间强制它仍然会读取原始值，即height=" $ctrl.height " 也不起作用。

幸运的是，config 属性被正确解析，根据文档，高度可以指定为其中的属性。因此，从您的元素中删除 height 属性并在您的 onInit 函数中，将 height 属性添加到您的配置对象：

ctrl.options.height = ctrl.height;

【讨论】：

甜！！不敢相信我没有检查选项中是否支持高度?‍♀️ 如果您有修复程序，您可以 PR angular-summernote！

我会，但最后一次提交是在 4 年前，我实际上并没有使用 Summernote，而且这是一个很好的解决方法