Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Update directive.ngdoc #4774

Closed
wants to merge 2 commits into from
Closed

Update directive.ngdoc #4774

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c767005
Update directive.ngdoc
bendowski Nov 4, 2013
255591b
Removed the 'element' argument from transclusion scopes example.
bendowski Nov 5, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/content/guide/directive.ngdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -634,8 +634,9 @@ redefines `name` as `Jeff`. What do you think the `{{name}}` binding will resolv
return {
restrict: 'E',
transclude: true,
scope: {},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

transclude implicitly creates new scope.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But this is creating an "isolated" scope

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

read this:

angular.js/src/ng/compile.js

Line 242 in 727b232

* #### `transclude`

transclude is a sibling scope of directive scope, but it inherits from parent scope and it does not matter what type(inherit or isolate) directive scope is.

look here:

angular.js/src/ng/compile.js

Line 929 in 727b232

var transcludeScope = scope.$new();

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example "doesn't work" without the "scope: {}" line, it renders "Check out the contents, Jeff!".

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@benol - I think you are wrong here. It does work without that line. And as @matjaz says, a new child scope will be created because of the transclusion, which means that changing $scope.name inside the directive will not affect the $scope.name in the scope passed to the transcluded content.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@benol : sorry I got confused by the two commits. Yes, you are right that we need a new scope here. Otherwise the directive does not create a scope of its own and so writing

scope.name = 'Jeff';

in the link function will change the scope outside.

@matjaz - you are right that the transclusion scope is a new child scope of the outerscope but since it inherits from this scope, changing the outerscope will change the inner scope.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you're right. unless directive has new scope, name gets overridden. but the new scope doesn't have to be isolate.

so there are two things in master to fix

  1. create new scope

    transclude: true,
scope : true,

  2. link function arguments

    link: function (scope) {

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to drop element parameter as this is not fundamentally wrong

  • it is a common pattern and removing it would be more confusing than
    leaving it in.

Regarding the scope. It is very rare to have transclusion without an
isolated scope, so again, keeping it thus will be less confusing in the
long run.
On 5 Nov 2013 17:32, "Matjaž Lipuš" [email protected] wrote:

In docs/content/guide/directive.ngdoc:

@@ -634,8 +634,9 @@ redefines name as Jeff. What do you think the {{name}} binding will resolv
return {
restrict: 'E',
transclude: true,

  •      scope: {},

you're right. unless directive has new scope, name gets overridden. but
the new scope doesn't have to be isolate.

so there are two things in master to fix

create new scope

transclude: true,
scope : true,

2.

link function arguments

link: function (scope) {

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/4774/files#r7438232
.

templateUrl: 'my-dialog.html',
link: function (element, scope) {
link: function (scope, element) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

element is not needed.

scope.name = 'Jeff';
}
};
Expand All @@ -659,6 +660,9 @@ The `transclude` option changes the way scopes are nested. It makes it so that t
transcluded directive have whatever scope is outside the directive, rather than whatever scope is on
the inside. In doing so, it gives the contents access to the outside scope.

Note that if the directive did not create its own scope, then `scope` in `scope.name = 'Jeff';` would
reference the outside scope and we would see `Jeff` in the output.

This behavior makes sense for a directive that wraps some content, because otherwise you'd have to
pass in each model you wanted to use separately. If you have to pass in each model that you want to
use, then you can't really have arbitrary contents, can you?
Expand Down