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

Commit 5a9dde1

Browse files
toastynerdpetebacondarwin
authored andcommitted
docs(guide/Directives): demonstrate how to pass data from isolate to parent scope
It looks like this used to be in the Angular docs as per this thread: https://groups.google.com/d/msg/angular/3CHdR_THaNw/AxqKwUw5t0oJ. I recently spent some time trying to get this to work and was very frustrated by lack of documentation. Closes #10567
1 parent 3a17799 commit 5a9dde1

File tree

1 file changed

+14
-4
lines changed

1 file changed

+14
-4
lines changed

docs/content/guide/directive.ngdoc

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -751,9 +751,12 @@ own behavior to it.
751751
angular.module('docsIsoFnBindExample', [])
752752
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
753753
$scope.name = 'Tobias';
754-
$scope.hideDialog = function () {
754+
$scope.message = '';
755+
$scope.hideDialog = function (message) {
756+
$scope.message = message;
755757
$scope.dialogIsHidden = true;
756758
$timeout(function () {
759+
$scope.message = '';
757760
$scope.dialogIsHidden = false;
758761
}, 2000);
759762
};
@@ -771,14 +774,15 @@ own behavior to it.
771774
</file>
772775
<file name="index.html">
773776
<div ng-controller="Controller">
774-
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
777+
{{message}}
778+
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">
775779
Check out the contents, {{name}}!
776780
</my-dialog>
777781
</div>
778782
</file>
779783
<file name="my-dialog-close.html">
780784
<div class="alert">
781-
<a href class="close" ng-click="close()">&times;</a>
785+
<a href class="close" ng-click="close({message: 'closing for now'})">&times;</a>
782786
<div ng-transclude></div>
783787
</div>
784788
</file>
@@ -795,9 +799,15 @@ callback functions to directive behaviors.
795799

796800
When the user clicks the `x` in the dialog, the directive's `close` function is called, thanks to
797801
`ng-click.` This call to `close` on the isolated scope actually evaluates the expression
798-
`hideDialog()` in the context of the original scope, thus running `Controller`'s `hideDialog`
802+
`hideDialog(message)` in the context of the original scope, thus running `Controller`'s `hideDialog`
799803
function.
800804

805+
Often it's desirable to pass data from the isolate scope via an expression to the
806+
parent scope, this can be done by passing a map of local variable names and values into the expression
807+
wrapper fn. For example, the hideDialog function takes a message to display when the dialog is hidden.
808+
This is specified in the directive by calling `close({message: 'closing for now'})`. Then the local
809+
variable `message` will be available within the `on-close` expression.
810+
801811
<div class="alert alert-success">
802812
**Best Practice:** use `&attr` in the `scope` option when you want your directive
803813
to expose an API for binding to behaviors.

0 commit comments

Comments
 (0)