If you can the best thing to do is generate the complete html in *HAML *it
self for some reason you don't want to do it, then there are two options a
head using $parse <http://docs.angularjs.org/api/ng/service/$parse> or
$compile <http://docs.angularjs.org/api/ng/service/$compile> and "dynamic"
attributes. I do see some concerns here not all the attributes are mapped
to the input some are for label and hint also u need to figure out how
to differentiate them. And one more thing is your are including the the
field template which has the attributes & there values fixed, instead of
this generating the input as need based on attributes would be better.
> demo.directive('passCompile', ['$compile', function($compile) {
> return {
> restrict: 'E',
> transclude: 'element',
> link: function(scope, element, attrs, model, transcludeElm) {
> var origElement = transcludeElm();
> var node = angular.element('<input/>');
> angular.forEach(attrs.$attr, function(name) {
> node.attr(name,origElement.attr(name))
> });
> element.after($compile(node)(scope));
> }
> };
> }]);
Working demo http://plnkr.co/edit/7U2uoN?p=preview
The above example shows a way to move the attributes off from the input to
Using $compile <http://docs.angularjs.org/api/ng/service/$compile> service
but i had transclude the element which makes it easy as if you have same
attributes on both the directive and input they might cause some unexpected
behavior. In case you want to use
$parse<http://docs.angularjs.org/api/ng/service/$parse> service
ngModel, ngBind and some other attributes wont work as the don't watch the
attribute for changes which in this case you would be doing base on the
parents attributes. Do let me know if this help you out.
On Mon, Mar 24, 2014 at 8:25 PM, Jarrett Lusso <[email protected]> wrote:
> 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 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.
