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

docs(guide/Directives): data from isolate to parent scope #10567

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
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
13 changes: 10 additions & 3 deletions docs/content/guide/directive.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -751,9 +751,12 @@ own behavior to it.
angular.module('docsIsoFnBindExample', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scope.name = 'Tobias';
$scope.hideDialog = function () {
$scope.message = '';
$scope.hideDialog = function (message) {
$scope.message = message;
$scope.dialogIsHidden = true;
$timeout(function () {
$scope.message = '';
$scope.dialogIsHidden = false;
}, 2000);
};
Expand All @@ -771,14 +774,15 @@ own behavior to it.
</file>
<file name="index.html">
<div ng-controller="Controller">
{{message}}
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
Check out the contents, {{name}}!
</my-dialog>
</div>
</file>
<file name="my-dialog-close.html">
<div class="alert">
<a href class="close" ng-click="close()">&times;</a>
<a href class="close" ng-click="close({message: 'closing for now'})">&times;</a>
<div ng-transclude></div>
</div>
</file>
Expand All @@ -796,7 +800,10 @@ callback functions to directive behaviors.
When the user clicks the `x` in the dialog, the directive's `close` function is called, thanks to
`ng-click.` This call to `close` on the isolated scope actually evaluates the expression
`hideDialog()` in the context of the original scope, thus running `Controller`'s `hideDialog`
function.
function. Often it's desirable to pass data from the isolate scope via an expression and to the
parent scope, this can be done by passing a map of local variable names and values into the expression
wrapper fn. For example, the hideDialog function takes a message to display when the dialog is hidden.
This is specified in the directive by calling `close({message: 'closing for now'})`.

<div class="alert alert-success">
**Best Practice:** use `&attr` in the `scope` option when you want your directive
Expand Down