使用角度分量中的绑定

时间:2016-07-06 12:56:10

标签: html angularjs binding components

您好,我在代码中使用了一些不同的角度组件。其中一个是我的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=&quot;currentValue&quot;></input-helper>'}"> 

当我尝试在输入辅助组件的模板中显示值时,我什么都没得到:

<div class="inputHelperComp">
{{ currentValue }}
</div>

这张图片可能有助于理解:

enter image description here

我在输入-helper-addon的组件标记中传递了第一个绑定中我的html中输入的值,得到它正确并且可以显示它并在两侧更改它,因为'=' in我的约束定义。之后我在input-helper-addon的模板中有另一个具有相同绑定的组件标记,所以我试图用指令中的值再次传递它,但它不起作用。有什么想法吗?

对于这个复杂的问题感到抱歉,但我没有其他想法......

谢谢和欢呼。

0 个答案:

没有答案