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