Yeah, I'd define a directive whose template basically looks like <colorpicker ng-if="item.type == 'colorPicker'"> <slider max="100" min="0" ng-if="item.type == 'lengthSlider'">
And shove the data in via appropriate models. Then you can define other templates for colorpicker, slider, and so forth, either roll your own or put some sugar on an existing jquery or angular plugin. e On Thu, Aug 28, 2014 at 9:37 AM, Tony pee <[email protected]> wrote: > I think your on the right direction- you could switch on which > html/controller to apply based on the 'type', but if you want to have > separate directives (which might be more convoluted) - maybe this will help: > > > http://weblogs.thinktecture.com/pawel/2014/07/angularjs-dynamic-directives.html > > > On 28 August 2014 09:09, Simon Mansfield <[email protected]> > wrote: > >> Okay, so my issue might take a little explaining, so imagine a use case >> where you have a "Person" object, with various properties (*the >> properties aren't always the same*), for example: >> >> var Person = { >> eyeColor: { type: 'colorPicker', value: '#0000FF'}, >> hairColor: { type: 'colorPicker', value: '#000000' }, >> hairLength: { type: 'lengthSlider', value: 10 }, >> height: { type: 'lengthSlider', value: 250 }, >> shoeSize: { type: 'shoeSizeDropdown', value: 11 } >> }; >> >> So then imagine that you wish to provide a "person editor" screen, which >> iterates over each of the properties of the given `Person` object and then >> attempts to provide an 'editor' for each property. So, in this example, >> you'd have two color picker controls linked to the `eyeColor` and >> `hairColor` properties, followed by two slider controls... etc. >> >> What I have ended up with something similar to this: >> >> <div ng-repeat="(key, value) in vmPerson.person" >> class="product-field-editor" >> field-type="value.type" >> field-data="value.value"> >> </div> >> >> Where my `productFieldEditor` is a directive that contains the *logic >> and templates,* etc. for *all* the different types of field editors >> defined. It internally picks the template and logic that applies to the >> `type` specified. Obviously, this isn't ideal as the directive is getting >> large, cumbersome and a bit of a mess. >> >> What I'd like to do is have a directive, with it's own template, logic, >> etc. in it's own file, *for each editor*. However, how do I load the >> correct one? Other than adding them all and then using `ng-if`to determine >> whether it's used..? A switching directive, perhaps? >> >> -- >> 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. >> > > > > -- > Tony Polinelli > > -- > 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. > -- 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.
