Directive attributes and fromJson behavior in 1.2.12

[Claus Fjellø-Jensen]

Hi,

I use the following JSON attribute for directives, that allows me to configure the directive from the html:  

<my-drt config='{"useBold": false, "addButton": true, "identity": "id_02", "msg": "scope_02"}' ></my-drt>

As long as you stick to using constant values, you can read this directly in the link function (without using a $watch function) 

My problem is, that 'fromJson' seems to fail silently when using angular 1.2.12, as shown in this plunk:  

http://plnkr.co/edit/tC8LHvNKKKZAwrh8KwKs?p=preview

If you change the angular.js script tag in index.html to: src="http://code.angularjs.org/1.0.8/angular.js", it all works again.

Any suggestions?

Br,

Claus Fjellø-Jensen

[Dave Gruska]

Hi Claus,

  I don't know if this gets you anywhere or not, but I got the JSON to show up as an object in the console:

http://plnkr.co/edit/ZrvXKKemzToD9m0pU2Qc?p=preview

  Not sure why you are doing the config in the HTML, though.

[Claus Fjellø-Jensen]

Hi Dave,

You are right! - it is not the conversion that fails, it is the assignment to link's scope that is not reflected in the controllers $scope for some reason.

I will post a new plunker when I figured out why that is.

(The reason to configure the directive in  this way is that the actual directive, an Ace editor with an optional toolbar and status line and a varying number of rows, is that it is used in a number of places (sometimes even in the same page) and can easily be configured from within the html to include or exclude these features using ng-switches in the template). 

Br,

Claus

[Claus Fjellø-Jensen]

I have updated the plunker:

http://plnkr.co/edit/tC8LHvNKKKZAwrh8KwKs?p=preview

so a quick recap:

• fromJson actually works and can be printed to console
• I have included a function on controller $scope that returns the config object (initially set in the link function using scope.config = ... ) and it returns a valid config object from controller $scope that can be printed to console
• Using angular 1.2.12 the index.html does not display what was set on scope in the link function 
• Using angular 1.0.8 it all works

Kind of weird - I guess I missed out on some change in Angular behavior that was made along the way?

Br, Claus

[Dave Gruska]

Looks like it's working now:

http://plnkr.co/edit/Iksmm4LX5BH4dYrGAcux?p=preview

I changed scope: {} to scope: true

--
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/7yrdaUzsOZE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Sander Elias]

Hi Claus,

Actually you made use of a bug prior to 1.2.0 (see changelog).
An isolated scope was never meant to be visible to all it’s childs. If you need that,
you need an private scope (scope : true) in stead on an isolate one.

Regards
Sander

[Claus Fjellø-Jensen]

Hi Dave & Sander,

Thanks for your responses, it really helped me to figure out what I need to change in my code!

I need the isolated scope, so I updated the plunker to reflect that: 

http://plnkr.co/edit/tC8LHvNKKKZAwrh8KwKs?p=preview

When using transclude, the transcluded part (after version 1.0.8) no longer refers to the isolated scope of your directive, but to the whatever outer scope there is.

Well, corrected bug or feature? It means, that what is enclosed by your isolated directive html tag, even if it includes no new scopes, is not controlled by your directive. 

Another change I found, that I find somewhat counter intuitive, has to do with the compile function within an isolated scope directive - it no longer compiles to the isolated scope:

http://plnkr.co/edit/BP2CRxI33LERYQf77jw5?p=preview

I understand, that one can easily argue, that compile does not know the directive scope, but you wouldn't get many point for usability and API functional consistency.  

On a personal note concerning isolated scope, I would like to see that multiple isolated scopes could be created from a common master scope (e.g. using some scope: {} + 'parentScopeName'  notation) and that these isolated scopes encapsulated any (transcluded) sub-scopes.  That is the natural way to handle any master-detail data model where you are mostly concerned with isolating the detail-siblings from each other. Explicitly naming the parent scope would also allow a structure where you are not always constrained by the placement of the controllers within the html.

Regards,

Claus

[Claus Fjellø-Jensen]

Hi Sander & Dave,

I finally got the around to test your hints about "scope: true" and made a plunker - this concept of 'private scope' (I cannot find any documentation), 

will solve many of my issues, even though transclude still seem to link to the outer scope:

http://plnkr.co/edit/vls1XLXjDFdOqDrS8NLL?p=preview

Thanks again, guys!

Regards,

Claus

[Dave Gruska]

Hi Claus,

Looking quickly, I don't see any mentions of it either on http://docs.angularjs.org/guide/directive It may be somewhere else on the Angular site, though.

Pawel Kozlowski (one of the contributors to Angular and co-author of "Mastering Web Application Development with AngularJS") explains the difference in another thread in this group: https://groups.google.com/forum/#!topic/angular/7Rnd5RjdlCc

"scope:true will create a child scope that will prototypically inherit from its parent, so you will be able to access values defined on parent's scope in your directive.

scope:{} will create a child scope as well but this time a prototypical inheritance link will be broken and a directive will be "isolated".

We usually use isolated scope in directives when we want to use reusable widgets. By creating an isolated scope we can assure that a directive can't mess up things in other scopes."

So it seems like your scope: {} with transcluded content is technically a better solution, since it better encapsulates the directive code.

Dave

--