Jarrett,
I understood a couple of things now "sf_field" is the directive how do you
pass "%div{data: {sf_field: "text", ng_model: "user.name", label: "Name",
help: "What is your name?", placeholder: "enter your name", ng_required:
"true"}}" to id or are you translating you given syntax to some thing like
the following (lets say using your own compiler of some sort)
> <sf_field ng-model="user.name" label="Name" help="What is your name?"
> placeholder="enter your name" ng-required="true"/>
which would then generate the HTML out you have shared. In this case i dont
see why you need an other directive, if its not the case then please let me
know how and where your translating "%div{data: {sf_field: "text",
ng_model: "user.name", label: "Name", help: "What is your name?",
placeholder: "enter your name", ng_required: "true"}}" into
*sf_field*directive is it in the browser or on the server it self.
On Mon, Mar 24, 2014 at 12:22 PM, Jarrett Lusso <[email protected]> wrote:
> 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 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.
>
--
Thanks,
Kamalakar Gadireddy
Twitter: https://twitter.com/kamalakarg
GitHub: https://github.com/gKodes
--
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.
