docs(guide/directive): fix transclusion example

The example about transclusion and scopes worked only because the order of `scope` and `element`
arguments is wrong, which means that the `name' property of the scope is not really being updated.
To really work, the directive has to define its own scope, either a new child scope or, as is more
common with transclusion, an isolated scope.

Closes #4774
This commit is contained in:
Michal Bendowski 2013-11-04 14:24:18 +00:00 committed by Pete Bacon Darwin
parent 727b232fb2
commit e196413df6

View file

@ -634,8 +634,9 @@ redefines `name` as `Jeff`. What do you think the `{{name}}` binding will resolv
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (element, scope) {
link: function (scope, element) {
scope.name = 'Jeff';
}
};
@ -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?