您好,我在代码中使用了一些不同的角度组件。其中一个是我的Web应用程序中某些数字字段的输入帮助程序。
重要提示:请逐步阅读此说明以了解,因为描述此问题非常困难,我尽力做到这一点。 :)
我有一个标签<input-helper></input-helper>
的组件,它加载组件的模板。这个我可以在我的html中添加一个随机输入,它在我输入的右侧添加了一个按钮形式的div。我的组件中也有一个绑定,从输入中传递值(如果有的话)或更新值,当它清除时我输入组件的东西。所以它看起来像这样:
<input-helper-addon current-value="inputValue">
<input type="number" ng-model="inputValue">
</input-helper-addon>
在我的输入辅助组件的控制器中,我有跟随绑定,其中我捕获上面输入的值,即被转换:
static componentOptions = {
transclude: true,
bindings: {
currentValue: "="
}
}
在我的输入辅助组件的模板中,我有这样的东西:
<div class="inputHelperAddonComp">
<!--HERE IS THE TRANSCLUDED INPUT-->
<div ng-transclude></div>
<!--HERE IS THE BUTTON WHICH IS ON THE RIGHT OF THE INPUT-->
<div class="inputAddonRight" tooltip="{template='<input-helper></input-helper>'}">
<img src="./randomIcon.svg">
</div>
<!--HERE I PRINT THE VALUE FROM THE INPUT - IT WORKS-->
{{ currentValue }}
</div>
现在我从输入中得到正确的值,并使用绑定currentValue: "="
我可以观察它并在两侧(在输入和组件中)更新。
现在查看我的input-helper-addon
组件模板中的以下行:
<div class="inputAddonRight" tooltip="{template='<input-helper></input-helper>'}">
在那里你可以看到,我有另一个绑定tooltip
,这是一个处理工具提示的插件。在那里,我可以向工具提示提供另一个模板,该模板必须显示在工具提示中。你可以看到,有可能是inline-html,所以我直接给出了另一个组件input-helper
的标签。
显示输入辅助键的第二个组件input-helper
还有一个模板和一个自己的指令,如input-helper-addon
组件。它们看起来像这样:
我在指令中再次使用了一个名为currentValue的绑定:
static componentOptions = {
bindings: {
currentValue: "="
}
}
所以现在,输入辅助组件也需要输入的值,我必须再次传递它。
当我们回到input-helper-addon时,我想,我可以在工具提示的模板中再次给出绑定,使用input-helper-addon的指令的currentValue绑定值,就像这样:
<div class="inputAddonRight" tooltip="{template='<input-helper current-value="currentValue"></input-helper>'}">
当我尝试在输入辅助组件的模板中显示值时,我什么都没得到:
<div class="inputHelperComp">
{{ currentValue }}
</div>
这张图片可能有助于理解:
我在输入-helper-addon的组件标记中传递了第一个绑定中我的html中输入的值,得到它正确并且可以显示它并在两侧更改它,因为'='
in我的约束定义。之后我在input-helper-addon的模板中有另一个具有相同绑定的组件标记,所以我试图用指令中的值再次传递它,但它不起作用。有什么想法吗?
对于这个复杂的问题感到抱歉,但我没有其他想法......
谢谢和欢呼。