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

4ioopgfo  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(248)

我有一个非常简单的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-modeloptions 干得好。

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

我还检查并重播了 $ctrl.height 在带有硬编码编号的模板中,这确实有效。
这是我不知道的安格拉斯的怪癖吗(我对angularjs是新手,来自react)
或者这可能是summernote指令中的一个bug?
提前感谢您的帮助!

ef1yzkbh

ef1yzkbh1#

我查看了angular summernote src,它似乎被窃听了。他们的控制器写得不正确,以至于它读取 height 属性,所以它被字面解释为 "$ctrl.height" . 它的编写方式也是这样的,即使您试图在插值绑定之间强制它,它仍然会读取原始值,例如。 height="{{ $ctrl.height }}" 也不行。
幸运的是 config 属性被正确解析,根据文档,高度可以指定为该属性中的一个属性。因此,请移除 height 元素中的属性,并在 onInit 函数,将height属性添加到配置对象:

ctrl.options.height = ctrl.height;

相关问题