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 > - 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 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.
