Hey Kamal, To be completely honest I'm very new to angular and was just trying to put together a simple form alternative. sf_field was my directive and i actually didn't have a form directive. I'm not really sure the best way to go about it. My biggest concern was the fact that i wanted it to be able to accept any time of field that another angular module might make available. For instance, angular-payments creates payments-format and payments-validate. I didn't wanted to be able to just have those be appended on to the input if I put them on my directive. I wasn't sure if there was any simple way to just pass an attribute on the directive directly onto the input inside the template.
The way simple form works is you create a simple_form "form" and then you use their helpers to create inputs. You can then use any of the special attributes they provide on the input or any standard or custom ones. The biggest issue with angular is some of the attributes are strings or expressions and I don't know how I can pass them onto the input. Currently what I've done (which I'm not satisfied fully with) is setup the directive and just put the input code inside and have it transclude. This is slightly more code then my optimal solution, but its gives me the flexibility of assigning any attribute without any problem. On Mon, Mar 24, 2014 at 1:18 AM, Kamal <[email protected]> wrote: > Hi Jarrett, > > As i was not sure how you would provide the input to directive, i made the > assumption that the input would be given inside the directive starting and > ending tags and had made an plnkr > http://plnkr.co/edit/wS18n477zSN4kt5CNGNx?p=preview which transcludes the > element and creates the input based on the data, this is one way of doing > it as i had also assumed there would be one directive with multiple lines > of input seeing off https://github.com/plataformatec/simple_form. And in > the case you want dynamic attrs with working expressons/functions please > check the $parse <http://docs.angularjs.org/api/ng/service/$parse>service and > $compile <http://docs.angularjs.org/api/ng/service/$compile> for > dynamically binding the attr to the elements. An other thought which comes > to my mind is providing the data as scope variable as input. Let me know > assumptions clearly or share an example for which i can come to an better > understanding and see what i can help you out with. > > <trans-from> >> >> %div{"data": {"sf_field": "text", "ng_model": "user.name", >> "label": "Name", "help": "What is your name?", "placeholder": "enter your >> name", "ng_required": "true"}} >> %div{"data": {"sf_field": "password", "ng_model": "user.pass", >> "label": "Password", "help": "What is your name?", "placeholder": "enter >> passcode", "ng_required": "true"}} >> </trans-from> > > > Regards, > Kamal > > > On Sunday, 23 March 2014 02:22:49 UTC+5:30, Jarrett Lusso wrote: >> >> So I am trying to replicate a simple_form_for like alternative in >> angularjs to make it easy to build forms. >> >> Here is an input example >> >> %div{data: {sf_field: "text", ng_model: "user.name", label: "Name", >> help: "What is your name?", placeholder: "enter your name", ng_required: >> "true"}} >> >> Now my issue is I need to be able to take any parameter and pass it to >> the input. For instance the ng_required attribute. It would be silly to >> make my directive have a scope variable for each possible attribute because >> what happens if I add soemthing like angular-payments which has its own >> attributes you can drop on an input. Now I already through about maybe just >> using transclude and putting the input code in myself but I really was >> hoping to be able to build a dynamic form input directive that would >> manage, hints, errors / validations, etc >> >> Note, this generates a bunch of HTML >> >> <div class="input-wrapper text" data-ng-class="{'field-error': isError}"> >> <label class="field-wrap"> >> <div class="label ng-binding"> >> Name >> <i class="help-icon fa fa-question-circle ng-scope" >> data-ng-show="help" data-tooltip="What is your name?"></i> >> </div> >> <div class="field"> >> <!-- ngInclude: fieldTemplate --><div data-ng-include="fieldTemplate" >> class="ng-scope"><input data-ng-model="ngModel" placeholder="enter your >> name" type="text" class="ng-scope ng-pristine ng-valid" name="name"> >> </div> >> </div> >> </label> >> </div> >> >> Anyone with an suggestions on the best way to pass any attribute through >> would be greatly appreciated. I already thought about putting the "dynamic" >> attributes inside like a attrs parameter but I don't know how to make them >> work. That works for certain things but expressions/functions don't work. >> > -- > 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/OEKoyDIJpog/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.
