I did notice the issue was occurring because of using `angular.element.replaceWith` which when replacing the element (in this case the input) would daloc/unbind all the events, which in this case would cause ng-model not to work when any changes made to the input value. I found the use of this sort off directive interesting and created one of my own you can take a look at the demo here http://plnkr.co/edit/qvnLq1?p=preview and the source at https://github.com/gKodes/ngul/blob/master/js/nu.wrap.js. It still has some issue for rendering complex object, this is just a preview so only had concentrated on input type `text`.
Regards, Kamalakar Gadireddy Twitter: https://twitter.com/kamalakarg GitHub: https://github.com/gKodes On Mon, Apr 21, 2014 at 11:19 PM, Nikita Tovstoles < [email protected]> wrote: > That version seems to suffer from the same issue - 2-way binding on > ng-model is not respected (for example if I edit {{test}} inside the > directive, the value in <pre> above it does not get updated) > > I took a different approach, using transclude and then synchronizing > ngModel's expression values between transcluded and parent scopes. Seems to > work, though I would certainly appreciate any feedback. Here's the demo: > http://plnkr.co/edit/YsnczYfKH7vyqFbZLi6y?p=preview > > notice that {{foo}} external to the directive, directive input and label > all are synchronized - irrespectively whether {{foo}} is updated by the > directive or other controls. > > > On Sunday, April 20, 2014 8:41:58 AM UTC-7, Kamal wrote: > >> Nikita, >> >> Initial value is not the issue with the warp it with how the value is >> being set for the first time. I have updated the example to solve that and >> i remembered an other way to warp it which would be preferable way to make >> it easy for any template. Check out the updated demo for warp >> http://plnkr.co/edit/lNegC0?p=preview<http://www.google.com/url?q=http%3A%2F%2Fplnkr.co%2Fedit%2FlNegC0%3Fp%3Dpreview&sa=D&sntz=1&usg=AFQjCNEGJ-TUGRO2EOdrM-KR_LirxDV-Xg> >> you >> can also use >> $templateCache<https://docs.angularjs.org/api/ng/service/$templateCache> >> service >> with a custom tag which would be replaced by the input (there by warping it >> inside at any given location) where the input to use the angular template >> engine. http://plnkr.co/edit/RioTmn?p=preview >> >> If you want to deal with a little more complex code on how to transclude/wrap >> and create elements inside have a look at my git directive >> https://github.com/gKodes/ngul/blob/master/js/nu.list.js / to play with >> http://jsfiddle.net/gKodes/xnTrZ/light/ >> >> Hope this give a much better picture. >> >> Regards, >> Kamalakar Gadireddy >> Twitter: https://twitter.com/kamalakarg >> GitHub: https://github.com/gKodes >> >> >> On Sun, Apr 20, 2014 at 8:24 PM, Nikita Tovstoles >> <[email protected]>wrote: >> >>> Thanks for your input, Kamal. I tried out both approaches and am having >>> some difficulties: >>> >>> - wrap: does not display ng-model's initial value; also inlining >>> HTML makes it difficult to develop a more elaborate UI (for example >>> overlay >>> ok/cancel buttons over input). >>> demo<http://plnkr.co/edit/BsCOBCQyTPHb0KNQpxLo?p=preview> (link >>> should read 'bob' on initial render) >>> - transclude: does not respect ng-model on input: so that external >>> changes to value of expression of ng-model aren't reflected (i.e. two-way >>> binding lost) (demo<http://plnkr.co/edit/feIIsZGFGJVROLpT8NjZ?p=preview> >>> ) >>> >>> However, I do agree that transclude can be used. I think the only >>> wrinkle is keeping scope.$parent in sync with transclude scope wrt <input> >>> binding (for shadow scope property case wherein ng-model is bound either to >>> a primitive or to a not-yet-existing object ie. ng-model="foo.bar" if foo >>> is undefined initially). demo forthcoming >>> >>> Thanks again, >>> >>> -nikita >>> >>> >>> On Saturday, April 19, 2014 11:00:44 AM UTC-7, Kamal wrote: >>>> >>>> Nikita, >>>> >>>> I do see two way to do it one with `transclude` and the other with >>>> `element.wrap`, where in both the case you can use *restrict: >>>> A*(attribute). >>>> >>>> http://plnkr.co/edit/1XHnWF?p=preview -- Wrap >>>> http://plnkr.co/edit/n46dCxV8nHaJAaxdkZfG?p=info -- transclude >>>> >>>> I would prefer the wrap, as in the case of transclude it creates and >>>> additional child scope which would cause some binding issues u can have a >>>> look at the demo by adding a ng-model and see how it works. In the case of >>>> wrap we just moving the input inside a different parent which would replace >>>> its current position therefore no new scope, no issues. I hope this helps. >>>> >>>> Regards, >>>> Kamal >>>> >>>> On Saturday, 19 April 2014 19:24:05 UTC+5:30, Nikita Tovstoles wrote: >>>>> >>>>> Thanks for the reply, Luke. However I don't think your suggestion >>>>> solves my issue as it describes a specialized directive (ie one supporting >>>>> ng-pattern only) whereas I am looking for a general-purpose solution - >>>>> i.e. >>>>> either of the following: >>>>> >>>>> - element-level directive that supports any and all validators - >>>>> present and future - that are supported by >>>>> input[text]<https://docs.angularjs.org/api/ng/input/input%5Btext%5D>. >>>>> it <editable ng-pattern ng-min> etc. So that if any 'x-foo' is a valid >>>>> here <input >>>>> type="text" ng-model="" x-foo>, it should also work on <editable >>>>> x-foo> OR >>>>> >>>>> >>>>> - can I do than copying attributes from <editable> to inner >>>>> <input> during compile()? >>>>> >>>>> OR >>>>> >>>>> >>>>> >>>>> * - attribute-level directive i.e. - <input type="text" editable> that >>>>> 'decorates' <input> with click-to-edit UI I described above. * >>>>> >>>>> - again, the problem here is that 'template' cannot be used with >>>>> <input>. >>>>> >>>>> >>>>> I also thought of using transclude ie: >>>>> >>>>> <editable><input type="text" ng-model="" ng-required="" ng-pattern >>>>> ng-minlength=""></editable> >>>>> >>>>> ..to click-to-edit whatever's transcluded but (and I could be wrong >>>>> here) I would not be able to access transcluded contents' ng-model from >>>>> <editable>'s link(). >>>>> >>>>> -nikita >>>>> >>>>> >>>>> On Fri, Apr 18, 2014 at 10:52 PM, Luke Kende <[email protected]>wrote: >>>>> >>>>>> >>>>>> - You could use dynamic patterns: http://stackoverflow.com/ques >>>>>> >>>>>> tions/18900308/angularjs-dynamic-ng-pattern-validation<http://stackoverflow.com/questions/18900308/angularjs-dynamic-ng-pattern-validation> >>>>>> - You could define your patterns in the directive template and >>>>>> then specify by another attribute like "type": >>>>>> >>>>>> <editable type="username" value="userr.name"></editable> >>>>>> >>>>>> >>>>>> template: >>>>>> >>>>>> <span class="user-info" ng-hide="edit">{{value}}</span> >>>>>> >>>>>> <ng-form name="innerForm" ng-show="edit"> >>>>>> >>>>>> <div ng-switch on="type"> >>>>>> >>>>>> <input ng-switch-when="username" ng-model="username" type="text" >>>>>> ng-pattern="/username pattern/"> >>>>>> >>>>>> <input ng-switch-when="password" ng-model="password" type="text" >>>>>> ng-pattern="/password pattern/"> >>>>>> >>>>>> <input ng-switch-when="email" type="text" ng-pattern="/email >>>>>> pattern/"> >>>>>> >>>>>> </div> >>>>>> >>>>>> </ng-form> >>>>>> <a ng-show="!edit" ng-click="edit=true"> >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> On Friday, April 18, 2014 4:05:07 PM UTC-6, Nikita Tovstoles wrote: >>>>>>> >>>>>>> Hi, I am building an edit-in-place directive - similar to >>>>>>> x-editable<http://vitalets.github.io/angular-xeditable/#text-simple> - >>>>>>> a widget that toggles between an anchor displaying a value and an input >>>>>>> editing it. Would appreciate some feedback on the following impl >>>>>>> choices: >>>>>>> >>>>>>> I would like to support arbitrary ng-x validation attributes that >>>>>>> work with >>>>>>> input[text]<https://docs.angularjs.org/api/ng/input/input%5Btext%5D>. >>>>>>> Seems like the most elegant way to do so would be to restrict: 'A' the >>>>>>> directive, and leverage ng-model, so that as client programmer I >>>>>>> could enable this directive participate in AJS form validation and >>>>>>> >>>>>>> <form name="myForm"><input name="foo" type="text" ng-model="foo" >>>>>>> required ng-pattern="" editable></form> >>>>>>> >>>>>>> ...can call scope.myForm.foo.$valid >>>>>>> >>>>>>> However, I think that won't work because I can't specify a directive >>>>>>> template (or templateUrl) with an <input> since that element cannot have >>>>>>> children. *So I must use restrict: 'E', right?* (Unless I ditch the >>>>>>> template and instead provide a compile() fn that appends template DOM to >>>>>>> <input>, but that would be harder to maintain)? >>>>>>> >>>>>>> So now I have an element directive: >>>>>>> >>>>>>> <editable name="foo" ng-model="foo" required >>>>>>> ng-pattern=""></editable> >>>>>>> >>>>>>> and associated template: >>>>>>> >>>>>>> <ng-form name="innerForm" ng-show="edit"> >>>>>>> <input type="text"> >>>>>>> </ng-form> >>>>>>> <a ng-show="!edit" ng-click="edit=true"> >>>>>>> >>>>>>> But now I have to enable support input[text] validation attr support >>>>>>> on <editable>. One way to do so would be by copying attributes from >>>>>>> <editable> onto the inner <input> in directive's compile() fn ie: >>>>>>> >>>>>>> <editable name="foo" ng-model="foo" e-ng-pattern="/expr/"></editab >>>>>>> le> >>>>>>> >>>>>>> ...would produce the following template: >>>>>>> >>>>>>> <ng-form name="innerForm" ng-show="edit"> >>>>>>> <input type="text" ng-pattern="/expr/"> >>>>>>> </ng-form> >>>>>>> <a ng-show="!edit" ng-click="edit=true"> >>>>>>> >>>>>>> ...by having compile() find attributes with 'e-' prefix and >>>>>>> replicate them on inner <input>.* Is there a more elegant approach? >>>>>>> One where I could somehow stick with attribute directive (on <input>)?* >>>>>>> >>>>>>> >>>>>>> thanks >>>>>>> -nikita >>>>>>> >>>>>>> >>>>>>> -- >>>>>> You received this message because you are subscribed to a topic in >>>>>> the Google Groups "AngularJS" group. >>>>>> To unsubscribe from this topic, visit https://groups.google.com/d/to >>>>>> pic/angular/cTkiixj_7ms/unsubscribe. >>>>>> To unsubscribe from this group and all its topics, send an email to >>>>>> [email protected]. >>>>>> To post to this group, send email to [email protected]. >>>>>> Visit this group at http://groups.google.com/group/angular. >>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>> >>>>> >>>>> -- >>> You received this message because you are subscribed to a topic in the >>> Google Groups "AngularJS" group. >>> To unsubscribe from this topic, visit https://groups.google.com/d/ >>> topic/angular/cTkiixj_7ms/unsubscribe. >>> To unsubscribe from this group and all its topics, send an email to >>> [email protected]. >>> To post to this group, send email to [email protected]. >>> Visit this group at http://groups.google.com/group/angular. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> -- > You received this message because you are subscribed to a topic in the > Google Groups "AngularJS" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/angular/cTkiixj_7ms/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
