When a directive is not instructed to create its own isolate scope, it will inherit the scope of whatever scope it exists inside.
Suppose that you begin with the following skeleton application:
(index.html - uncompiled) <div ng-app="myApp"> <div ng-controller="MainCtrl"> <my-directive> <p>HTML template</p> <p>Scope from {{origin}}</p> <p>Overwritten? {{overwrite}}</p> </my-directive> </div> </div> (app.js) angular.module('myApp', []) .controller('MainCtrl', function ($scope) { $scope.overwrite = false; $scope.origin = 'parent controller'; });
The most basic setup is to have the directive scope inherit from the parent scope that will be used by the directive within the link
function. This allows the directive to manipulate the parent scope. This can be done as follows:
(app.js) .directive('myDirective', function () { return { restrict: 'E', link: function (scope) { scope.overwrite = !!scope.origin; scope.origin = 'link function'; } }; });
This will compile into the following:
(index.html – compiled) <my-directive> <p>HTML template</p> <p>Scope from link function</p> <p>Overwritten? true</p> </my-directive>
Tip
JSFiddle: http://jsfiddle.net/msfrisbie/c3b3a38t/
There's nothing tricky going on here. The directive has no template, and the HTML inside it is subject to the modifications that the link
function makes to the scope. As this does not use isolate scope and there is no transclusion, the parent scope is provided as the scope
parameter, and the link
function writes to the parent scope's models. The HTML output tells us that the template was rendered from our index.html
markup, the link
function was the last to modify the scope, and the link
function overwrote the original values set up in the parent controller.
The Directive templating recipe examines how a directive can apply an external scope to a transplated template
The Isolate scope recipe gives details on how a directive can be decoupled from its parent scope
The Directive transclusion recipe demonstrates how a directive handles the application of a scope to the interpolated existing nested content