Hi Josh, on a related topic, I had a doubt:
There are instances when passing an object to the directive by manually
writing it as the value of an attribute may be useful, like passing initial
options to the directive, like this (a bad example, but just bear with me)
* <div data-ng-repeat="test in data.tests"> <span
data-xx-colorize data-xx-colors="{hue: {{5*$index}}, sat: {{50+10/$index}},
lum: 50}"> {{test}} </span> </div>*
Now, if I do bind it to my scope within the directive as so:
* directive('xxColorize', function() { ... scope:
{ color: "&xxColors" } controller =
function($scope, ...) { myColor = $scope.color();
... } });*
But this style of usage has one fault... It will necessarily create an
isolated scope.
What if I do NOT want any scope at all...
Is there a way to get the object to my directive without creating an
isolates scope?
I know *JSON.parse($attrs.xxColorize)* does the job, but it would fail if
the oject is not correctly formed (string keys, etc).
This problem does not happen in the method of binding with '*&xxColorize*',
but sadly that is what I'm trying to avoid.
Is there another way to do it?
On Saturday, 5 January 2013 23:38:29 UTC+5:30, Josh David Miller wrote:
>
> Hi Dave!
>
> If you don't need two-way binding and you know in advance which attributes
> you need and there aren't too many, then I think you're right: string-based
> scoping (`@`) is probably the right way to go. It's just simpler.
>
> Josh
>
>
> On Sat, Jan 5, 2013 at 8:56 AM, Venkatraman Dhamodaran
> <[email protected]<javascript:>
> > wrote:
>
>> Hi Dave,
>>
>> As Joshua suggested, & can be used to solve your problem [No two way
>> binding, but want to pass complex object].
>>
>> Updated the jsfiddle to use &
>>
>> http://jsfiddle.net/ramandv/nSseE/6/
>>
>> -Venkat
>>
>>
>> On Sat, Jan 5, 2013 at 9:29 PM, Dave Merrill <[email protected]<javascript:>
>> > wrote:
>>
>>> @Josh and Venkat, thanks for the ideas.
>>>
>>> I don't need two-way binding, so breaking bidirectionality isn't a
>>> problem.. I was only using = to allow a complex object to be passed as an
>>> attribute, without doing $eval on a passed string version of it.
>>>
>>> I'm not sure if you could set the properties of an empty object passed
>>> through =; kind of doubt it, since the object is bound. But since the point
>>> is not to require callers to pass seldom-used configs at all, I don't want
>>> to require them to pass the empty config object either.
>>>
>>> I've decided that in my immediate case, passing an object is more
>>> trouble than it's worth. I'm passing individual attributes instead, so
>>> missing ones can easily be defaulted/
>>>
>>> If you're interested, here's a fiddle testing different strategies for
>>> doing that defaulting, only one of which, setting missing attrs, only,
>>> works correctly:
>>> http://jsfiddle.net/davemerrill/s5ZXG/4/
>>>
>>> Dave
>>>
>>> On Friday, January 4, 2013 8:00:13 PM UTC-5, Joshua Miller wrote:
>>>
>>>> Hello!
>>>>
>>>> Venkatraman is right, but the caveat I supplied still applies: this
>>>> completely breaks bi-directional data binding, which is the entire purpose
>>>> of '='. Under that example, neither objects that were passed nor those
>>>> that
>>>> weren't can propagate changes to the scope where they were defined (at
>>>> least not without hacking a couple of $watches). As I said, if data
>>>> binding
>>>> is not required, then '@' or '&' are the way to go, philosophically.
>>>>
>>>> Josh
>>>>
>>>>
>>>> On Fri, Jan 4, 2013 at 4:45 PM, Venkatraman Dhamodaran <
>>>> [email protected]> wrote:
>>>>
>>>>> Hi Dave,
>>>>>
>>>>> If the usage of "=" is mandatory, new scope member can be created by
>>>>> merging the your default values and passed obj. And use the new scope
>>>>> member in the template.
>>>>>
>>>>> Check the updated fiddle
>>>>>
>>>>> http://jsfiddle.net/ramandv/nSseE/5/
>>>>>
>>>>> -Venkat
>>>>>
>>>>>
>>>>> On Sat, Jan 5, 2013 at 5:00 AM, Joshua Miller
>>>>> <[email protected]>wrote:
>>>>>
>>>>>> Hi Dave!
>>>>>>
>>>>>> I guess you _wouldn't_ go about setting default values. It's a
>>>>>> two-way binding with '=' to the parent scope, so you shouldn't be able
>>>>>> to
>>>>>> create it spontaneously in a child scope (i.e. the directive). If you
>>>>>> need
>>>>>> it to be optional, I suppose the best approach would be to pass in an
>>>>>> empty
>>>>>> object through '=' so you can manipulate its missing properties:
>>>>>> http://jsfiddle.net/joshdmiller/nSseE/4/. Any other solution would
>>>>>> make the property irretrievable in the parent scope, defeating the
>>>>>> purpose
>>>>>> of the two-way binding. However, if the two-way binding isn't needed,
>>>>>> you
>>>>>> should use '@' and pass in an expression (like `prop="{{val}}"`) which
>>>>>> you
>>>>>> could manipulate when there is no default as it's just a string.
>>>>>>
>>>>>> Josh
>>>>>>
>>>>>>
>>>>>> On Fri, Jan 4, 2013 at 8:51 AM, Dave Merrill <[email protected]>wrote:
>>>>>>
>>>>>>> So @ doesn't evaluate, but = and & do, right? I didn't quite get
>>>>>>> that the first times I read the docs about this.
>>>>>>>
>>>>>>> One consequence of = and & bind appears to be that those attributes
>>>>>>> aren't settable within your linking function., which makes sense, since
>>>>>>> it's bound ot the value whose name is passed in the attribute. Given
>>>>>>> that,
>>>>>>> how do you set default values for those attributes, to be used if
>>>>>>> they're
>>>>>>> not passed.
>>>>>>>
>>>>>>> In the example here:
>>>>>>> http://jsfiddle.net/davemerrill/nSseE/2/
>>>>>>> ...the title attribute can be defaulted if it's not passed, but
>>>>>>> setting attrs.prop in the linking function appears to change it if you
>>>>>>> log
>>>>>>> it right there, but it has no effect when the directive renders.
>>>>>>>
>>>>>>> How would you go about setting default values for complex attributes
>>>>>>> passed with = then?
>>>>>>>
>>>>>>> Dave
>>>>>>>
>>>>>>>
>>>>>>> On Thursday, January 3, 2013 2:10:24 PM UTC-5, Joshua Miller wrote:
>>>>>>>
>>>>>>>> The docs could probably be a little bit clearer here, but the basic
>>>>>>>> idea is that '@' evaluates the attribute and keeps it in sync on the
>>>>>>>> directive's scope, but it doesn't take a variable directly, so you're
>>>>>>>> just
>>>>>>>> passing in the object string; '&' evaluates an expression to a
>>>>>>>> function
>>>>>>>> accessible on the directive's scope, but the expression is evaluated
>>>>>>>> relative to the _directive's_ scope, so it doesn't have access to the
>>>>>>>> parent's scope property; finally, '=' just passes a property from the
>>>>>>>> parent scope into the directive and keeps it in sync, which is what
>>>>>>>> you
>>>>>>>> want in this case.
>>>>>>>>
>>>>>>>> For what it's worth, you could use '&' for the object literal:
>>>>>>>> http://plnkr.co/edit/uIyPrk?p=preview. The key is that '&' creates
>>>>>>>> a function from the expression, which must then be called to retrieve
>>>>>>>> the
>>>>>>>> evaluated object.
>>>>>>>>
>>>>>>>> Josh
>>>>>>>>
>>>>>>>>
>>>>>>>> On Thu, Jan 3, 2013 at 10:39 AM, Dave Merrill wrote:
>>>>>>>>
>>>>>>>>> Hmmm, using '='' as the scope character, as you did, gets it to
>>>>>>>>> work. Even passing an object literal works that way, sort of. Take a
>>>>>>>>> look
>>>>>>>>> at this fork:
>>>>>>>>> http://jsfiddle.net/davemerrill/FHVD9/3/
>>>>>>>>>
>>>>>>>>> It has three instance of the directive on the page, and though
>>>>>>>>> they all display correctly, if you enable the console you'll see a
>>>>>>>>> "10
>>>>>>>>> $digest() iterations reached" error. Without the object literal
>>>>>>>>> instance it works fine. Using '@' instead of '=' doesn't overflow,
>>>>>>>>> but also
>>>>>>>>> doesn't work, for any of those instances.
>>>>>>>>>
>>>>>>>>> There's no need in my case to pass an object literal, it was just
>>>>>>>>> handy, so the overflow problem with doing that isn't a big deal.
>>>>>>>>> Creating a
>>>>>>>>> scope var and passing it in does seem better than using $eval.
>>>>>>>>>
>>>>>>>>> Can you explain why '=' makes this work? The docs (which I am
>>>>>>>>> reading btw!) say it makes the binding bi-directional, but I don't
>>>>>>>>> get the
>>>>>>>>> connection, or how you knew to do that.
>>>>>>>>>
>>>>>>>>> Dave
>>>>>>>>>
>>>>>>>>> On Thursday, January 3, 2013 2:43:48 AM UTC-5, Joshua Miller wrote:
>>>>>>>>>
>>>>>>>>>> Hi Dave!
>>>>>>>>>>
>>>>>>>>>> Do you mean just passing an object variable off the scope to a
>>>>>>>>>> directive through an attribute? Like this: http://jsfiddle.net/
>>>>>>>>>> joshdmiller/FHVD9/
>>>>>>>>>>
>>>>>>>>>> Josh
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Wed, Jan 2, 2013 at 10:35 PM, Dave Merrill wrote:
>>>>>>>>>>
>>>>>>>>>>> It's true that scope.$eval does work, converting the passed
>>>>>>>>>>> string to an object.
>>>>>>>>>>>
>>>>>>>>>>> We don't have to do that with simple types. Is that the state of
>>>>>>>>>>> the art, or is there some other way to pass an object into a
>>>>>>>>>>> directive as
>>>>>>>>>>> an attribute?
>>>>>>>>>>>
>>>>>>>>>>> Thanks,
>>>>>>>>>>> Dave
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> On Wednesday, January 2, 2013 7:28:24 PM UTC-5, Tucker W wrote:
>>>>>>>>>>>>
>>>>>>>>>>>> Could you use scope.$eval?
>>>>>>>>>>>>
>>>>>>>>>>>> http://plnkr.co/edit/6xVZSrpfn3kbfHH7f91S
>>>>>>>>>>>>
>>>>>>>>>>>> On Wednesday, January 2, 2013 5:54:58 PM UTC-5, Dave Merrill
>>>>>>>>>>>> wrote:
>>>>>>>>>>>>>
>>>>>>>>>>>>> I'd like to pass a static or $scope-d object to a tag
>>>>>>>>>>>>> directive as an attribute. Is that possible?
>>>>>>>>>>>>>
>>>>>>>>>>>>> I've tried these, among other variations:
>>>>>>>>>>>>> <my-directive map="{a: 1, b: 2}"...
>>>>>>>>>>>>>
>>>>>>>>>>>>> <my-directive map="{{{a: 1, b: 2}}}"...
>>>>>>>>>>>>>
>>>>>>>>>>>>> $scope.map = {a: 1, b: 2};
>>>>>>>>>>>>> then
>>>>>>>>>>>>> <my-directive map="map"...
>>>>>>>>>>>>> or
>>>>>>>>>>>>> <my-directive map="{{map}}"...
>>>>>>>>>>>>>
>>>>>>>>>>>>> I've tried declaring the attribute in the directive like this:
>>>>>>>>>>>>> scope: {map: '@'}
>>>>>>>>>>>>> and
>>>>>>>>>>>>> scope: {map: '&'}
>>>>>>>>>>>>>
>>>>>>>>>>>>> None of those appear to work. I'm sure I'm missing something
>>>>>>>>>>>>> obvious. Any thoughts?
>>>>>>>>>>>>> Dave
>>>>>>>>>>>>>
>>>>>>>>>>>> --
>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>> Groups "AngularJS" group.
>>>>>>>>> To post to this group, send email to [email protected].
>>>>>>>>> To unsubscribe from this group, send email to angular+u...@
>>>>>>>>> googlegroups.com.
>>>>>>>>>
>>>>>>>>> Visit this group at http://groups.google.com/group
>>>>>>>>> /angular?hl=en-US.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups "AngularJS" group.
>>>>>>> To post to this group, send email to [email protected].
>>>>>>> To unsubscribe from this group, send email to angular+u...@
>>>>>>> googlegroups.com.
>>>>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>
>>>>>> --
>>>>>> You received this message because you are subscribed to the Google
>>>>>> Groups "AngularJS" group.
>>>>>> To post to this group, send email to [email protected].
>>>>>> To unsubscribe from this group, send email to angular+u...@
>>>>>> googlegroups.com.
>>>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "AngularJS" group.
>>>>> To post to this group, send email to [email protected].
>>>>> To unsubscribe from this group, send email to angular+u...@
>>>>> googlegroups.com.
>>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>>>>
>>>>>
>>>>>
>>>>
>>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "AngularJS" group.
>>> To post to this group, send email to [email protected]<javascript:>
>>> .
>>> To unsubscribe from this group, send email to
>>> [email protected] <javascript:>.
>>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>>
>>>
>>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "AngularJS" group.
>> To post to this group, send email to [email protected]<javascript:>
>> .
>> To unsubscribe from this group, send email to
>> [email protected] <javascript:>.
>> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>>
>>
>>
>
>
--
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/groups/opt_out.
