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

docs(guide/directive): clarify code examples for isolated scopes #4825

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
24 changes: 12 additions & 12 deletions docs/content/guide/directive.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -393,39 +393,39 @@ outside, and then map the outer scope to a directive's inner scope. We can do th
return {
restrict: 'E',
scope: {
customer: '=customer'
innercustomer: '=person'
},
templateUrl: 'my-customer.html'
};
});
</file>
<file name="index.html">
<div ng-controller="Ctrl">
<my-customer customer="naomi"></my-customer>
<my-customer person="naomi"></my-customer>
<hr>
<my-customer customer="igor"></my-customer>
<my-customer person="igor"></my-customer>
</div>
</file>
<file name="my-customer.html">
Name: {{customer.name}} Address: {{customer.address}}
Name: {{innercustomer.name}} Address: {{innercustomer.address}}
</file>
</example>

Looking at `index.html`, the first `<my-customer>` element binds the inner scope's `customer` to `naomi`,
which we have exposed on our controller's scope. The second binds `customer` to `igor`.
Looking at `index.html`, the first `<my-customer>` element binds the inner scope's `innercustomer` to `naomi`,
which we have exposed on our controller's scope. The second binds `innercustomer` to `igor`.

Let's take a closer look at the scope option:

```javascript
//...
scope: {
customer: '=customer'
innercustomer: '=person'
},
//...
```

The property name (`customer`) corresponds to the variable name of the `myCustomer` directive's isolated scope.
The value of the property (`=customer`) tells `$compile` to bind to the `customer` attribute.
The property name (`innercustomer`) corresponds to the variable name of the `myCustomer` directive's isolated scope.
The value of the property (`=person`) tells `$compile` to bind to the `person` attribute.

<div class="alert alert-warning">
**Note:** These `=attr` attributes in the `scope` option of directives are normalized just like directive names.
Expand Down Expand Up @@ -462,19 +462,19 @@ from within our directive's template:
return {
restrict: 'E',
scope: {
customer: '=customer'
innercustomer: '=person'
},
templateUrl: 'my-customer-plus-vojta.html'
};
});
</file>
<file name="index.html">
<div ng-controller="Ctrl">
<my-customer customer="naomi"></my-customer>
<my-customer person="naomi"></my-customer>
</div>
</file>
<file name="my-customer-plus-vojta.html">
Name: {{customer.name}} Address: {{customer.address}}
Name: {{innercustomer.name}} Address: {{innercustomer.address}}
<hr>
Name: {{vojta.name}} Address: {{vojta.address}}
</file>
Expand Down