Thanks!
On Tuesday, 7 January 2014 20:29:28 UTC+5:30, Daniel Tabuenca wrote:
>
> 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.
