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]<javascript:>
> > 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/
>>>>>
>>>>> questions/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/"></editable>
>>>>>>
>>>>>> ...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/
>>>>> 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] <javascript:>.
>> To post to this group, send email to [email protected]<javascript:>
>> .
>> 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.
