Sorry that I'm showing you haml and html. I write haml but the directive
generates HTML obviously. I have two HTML files. I have a baseField HTML
template which then transcludes the fieldTemplate.
This
%div{data: {sf_field: "text", ng_model: "user.name", label: "Name", help:
"What is your name?", placeholder: "enter your name", ng_required: "true"}}
generates this
<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>
BaseFieldHTML
<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">
</div>
</div>
</label>
</div>
FieldTemplateHTML
<input data-ng-model="ngModel" placeholder="enter your name" type="text"
class="ng-scope ng-pristine ng-valid" name="name">
On Mon, Mar 24, 2014 at 4:00 AM, Kamalakar Gadireddy <[email protected]>wrote:
> 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 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.
