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.
-
+
+

{{title}}

+
-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. -