angularjs 组件控制器没有将初始绑定值传递给模板中的指令（夏季笔记）

Question

我有一个相当简单的 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,
  });
}

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

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

我还检查了用硬编码数字重新镀上模板中的 $ctrl.height，这确实有效。

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

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

在此先感谢您的帮助！

Answer 1

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

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

ctrl.options.height = ctrl.height;

angularjs 组件控制器没有将初始绑定值传递给模板中的指令（夏季笔记）

angularjs component controller not passing initial binding value to directive in template (summernote)

angularjs

summernote