Yes, just do $scope.$eval($attrs.xxColorize).
On Tuesday, January 7, 2014 6:39:02 AM UTC-7, Kumar Harsh Srivastava wrote:
>
> 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]>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]> 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].
>>>> To unsubscribe from this group, send email to
>>>> [email protected].
>>>> 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
>>> [email protected].
>>> 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.
