diff --git a/docs/content/guide/directive.ngdoc b/docs/content/guide/directive.ngdoc
index 2217337b05e5..85d8c4165acf 100644
--- a/docs/content/guide/directive.ngdoc
+++ b/docs/content/guide/directive.ngdoc
@@ -303,6 +303,7 @@ The `restrict` option is typically set to:
* `'A'` - only matches attribute name
* `'E'` - only matches element name
* `'C'` - only matches class name
+* `'M'` - only matches comment
These restrictions can all be combined as needed:
@@ -646,6 +647,7 @@ To do this, we need to use the `transclude` option.
return {
restrict: 'E',
transclude: true,
+ scope: {},
templateUrl: 'my-dialog.html'
};
});
@@ -656,8 +658,7 @@ To do this, we need to use the `transclude` option.
-
-
+
@@ -679,7 +680,7 @@ that redefines `name` as `Jeff`. What do you think the `{{name}}` binding will r
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
- link: function (scope, element) {
+ link: function (scope) {
scope.name = 'Jeff';
}
};
@@ -691,8 +692,7 @@ that redefines `name` as `Jeff`. What do you think the `{{name}}` binding will r
-
-
+
@@ -703,7 +703,7 @@ 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
+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
@@ -776,9 +776,9 @@ function.
Often it's desirable to pass data from the isolate scope via an expression 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'})`. Then the local
-variable `message` will be available within the `on-close` expression.
+wrapper function. 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'})`.
+Then the local variable `message` will be available within the `on-close` expression.
**Best Practice:** use `&attr` in the `scope` option when you want your directive
@@ -837,7 +837,7 @@ element?
}]);
- Drag ME
+ Drag Me
@@ -882,7 +882,7 @@ to which tab is active.
})
.directive('myPane', function() {
return {
- require: '^myTabs',
+ require: '^^myTabs',
restrict: 'E',
transclude: true,
scope: {
@@ -898,11 +898,9 @@ to which tab is active.
- Hello
Lorem ipsum dolor sit amet
- World
Mauris elementum elementum enim at suscipit.
counter: {{i || 0}}
@@ -919,22 +917,25 @@ to which tab is active.
-
+
-The `myPane` directive has a `require` option with value `^myTabs`. When a directive uses this
-option, `$compile` will throw an error unless the specified controller is found. The `^` prefix
-means that this directive searches for the controller on its parents (without the `^` prefix, the
-directive would look for the controller on just its own element).
+The `myPane` directive has a `require` option with value `^^myTabs`. When a directive uses this
+option, `$compile` will throw an error unless the specified controller is found. The `^^` prefix
+means that this directive searches for the controller on its parents. (A `^` prefix would make the
+directive look for the controller on its own element or its parents; without any prefix, the
+directive would look on its own element only.)
So where does this `myTabs` controller come from? Directives can specify controllers using
the unsurprisingly named `controller` option. As you can see, the `myTabs` directive uses this
option. Just like `ngController`, this option attaches a controller to the template of the directive.
-If it is necessary to reference the controller or any functions bound to the controller's scope in
-the template, you can use the option `controllerAs` to specify the name of the controller as an alias.
+If it is necessary to reference the controller or any functions bound to the controller from the
+template, you can use the option `controllerAs` to specify the name of the controller as an alias.
The directive needs to define a scope for this configuration to be used. This is particularly useful
in the case when the directive is used as a component.
@@ -949,7 +950,7 @@ The corresponding parameter being sent to the `link` function will also be an ar
angular.module('docsTabsExample', [])
.directive('myPane', function() {
return {
- require: ['^myTabs', '^ngModel'],
+ require: ['^^myTabs', 'ngModel'],
restrict: 'E',
transclude: true,
scope: {
@@ -985,4 +986,3 @@ available in the {@link guide/compiler compiler guide}.
The {@link ng.$compile `$compile` API} page has a comprehensive list of directive options for
reference.
-