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="currentvalue"></input-helper>'}">
when try display value in template of input-helper component got nothing:
<div class="inputhelpercomp"> {{ currentvalue }} </div>
here picture perhaps helps understand:
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
Post a Comment