html - Work with bindings in angular components -


hi i've use different angular components in code. 1 of input helper number fields in web application.

important: please read description step step understand, because it's hard describe problem, gave best this. :)

i have component has tag <input-helper></input-helper>, loads template of component. can put around random input in html , adds div in form of button on right side of input. have binding in component, pass throught value input (if there some) or update value, when it's clear , type component. looks this:

<input-helper-addon current-value="inputvalue">     <input type="number" ng-model="inputvalue"> </input-helper-addon> 

in controller of input helper component have follow binding, catch value of input above, transcluded:

static componentoptions = {     transclude: true,     bindings: {         currentvalue: "="     } } 

in template of input helper component have this:

<div class="inputhelperaddoncomp">     <!--here transcluded input-->     <div ng-transclude></div>     <!--here button on right of input-->     <div class="inputaddonright" tooltip="{template='<input-helper></input-helper>'}">         <img src="./randomicon.svg">     </div>     <!--here print value input - works-->     {{ currentvalue }} </div> 

now correct value input , binding currentvalue: "=" can watch , update in on both sides (in input , in component).

now @ follow line in template of input-helper-addon component:

<div class="inputaddonright" tooltip="{template='<input-helper></input-helper>'}"> 

there can see, have binding tooltip, plugin handle tooltip. there can give tooltip template, has displayed in tooltip. can see, there inline-html possible, give directly tag of component input-helper within.

the second component input-helper, shows input-helper keys, has template , own directive input-helper-addon component. this:

i used again binding called currentvalue in directive:

static componentoptions = {     bindings: {         currentvalue: "="     } } 

so now, input-helper component needs value of input , have pass once again.

when go input-helper-addon, thought, can give binding again in template of tooltip, value of currentvalue binding of directive input-helper-addon this:

<div class="inputaddonright" tooltip="{template='<input-helper current-value=&quot;currentvalue&quot;></input-helper>'}">  

when try display value in template of input-helper component got nothing:

<div class="inputhelpercomp"> {{ currentvalue }} </div> 

here picture perhaps helps understand:

enter image description here

i pass in component tag of input-helper-addon value of input in html in first binding, correct , can display , change in both sides because of '=' in binding definition. after have in template of input-helper-addon component tag same binding, tried pass throught again value directive, doesn't work. ideas?

sorry complicate question, had no other ideas...

thanks , cheers.


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -