The biggest problem is I don't know all the fields. Some modules create attributes like payments-format or payments-validate or w.e. I'm trying to get it so that if I do
<div sf-field name="creditcard" label="My Label" help="Whats your card" ng-model="creditcard" payments-validate="card" /> that it will generate <div > <!-- all the wrapper generated html --> <input type="text" name="creditcard" payments-validate="card" /> </div> I know what fields on the directive don't need to be passed on to the input but I don't know what does. So for instance, label and help don't get passed to the input but anything else should. Is that possible? On Mon, Mar 24, 2014 at 11:34 AM, Kamalakar Gadireddy <[email protected]>wrote: > 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 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.
