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

问题描述

我有一个相当简单的 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 height="$ctrl.height" 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,});
}

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

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

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

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

或者是summernote指令中的一个错误？

在此先感谢您的帮助！

解决方法

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

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

ctrl.options.height = ctrl.height;

angularjs