Hey,
So i was playing around with it all and the issue I'm having now is that I
don't have access to the scope in the same way I believe.
watchExpression = [ctrl.$name, attrs.name, '$invalid'].join('.')
$scope.$parent.$watch watchExpression, (value) ->
$scope.isError = value
I had that setup so that I could put a class on the fields when an error
occurred. Not sure how to get this working now since I'm getting undefined
when I try and get inputs on the form. ctrl was the form because I had
require: '^form' in my directive
On Mon, Mar 24, 2014 at 10:54 PM, Jarrett Lusso <[email protected]> wrote:
> I will check this out on my flight tomorrow. Hopefully this is the fix! :)
>
>
> On Mon, Mar 24, 2014 at 1:15 PM, Kamalakar Gadireddy
> <[email protected]>wrote:
>
>> There you go you know what things that should not got in input so you can
>> block them and rest u can pass them to the input. In the example i have
>> shared you can see an for each loop
>>
>> angular.forEach(attrs.$attr, function(name) {
>>>
>> // if condition when to copy the attribute, in your case you
>>> will check to see if its no *label* or *hint *or any other thing that
>>> should not got on to the input.
>>
>> node.attr(name,origElement.attr(name))
>>> });
>>
>>
>> Instead of the simple input node you can replace it with your html. You
>> can play around with the example in
>> plnkr.co<http://plnkr.co/edit/7U2uoN?p=preview>which i had shared and see it
>> would copy all the attributes of the
>> directive to the input as explained above you need to block thing you don't
>> need. Play around and let me know.
>>
>> demo.directive('simpleForm', ['$compile', function($compile) {
>> var template =
>> '<div class="input-wrapper text" data-ng-class="{\'field-error\':
>> isError}">' +
>> '<label class="field-wrap">' +
>> '<div class="label">' +
>> '<i class="help-icon fa fa-question-circle" data-tooltip=""></i>'
>> +
>> '</div>' +
>> '<div class="field"><input></div>' +
>> '</div>' +
>> '</label>' +
>> '</div>';
>> var notForInput = ['simple-form', 'label', 'help'];
>> return {
>> restrict: 'EA',
>> transclude: 'element',
>> link: function(scope, element, attrs, model, transcludeElm) {
>> var origElement = transcludeElm();
>> var node = angular.element(template);
>> var input = node.find('input');
>> var toolTip = $('i', node);
>> angular.forEach(attrs.$attr, function(name) {
>> if( notForInput.indexOf(name) === -1 ) {
>> input.attr(name,origElement.attr(name))
>> }
>> });
>> toolTip.before(origElement.attr('label'))
>> toolTip.attr('data-tooltip', origElement.attr('help'));
>> element.after($compile(node)(scope));
>> }
>> };
>> }]);
>>
>>
>>
>> On Mon, Mar 24, 2014 at 9:47 PM, Jarrett Lusso <[email protected]> wrote:
>>
>>> 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 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.
