AngularJS - transclude scope

by yoorek

HTML

<div ng-app="transclude">
  <div ng-controller="Ctrl">
    <input ng-model="title"><br>
    <textarea ng-model="text"></textarea> <br/>
    <pane title="{{title}}">{{text}}</pane>
  </div>
</div>

CSS

.ng-invalid { border: 1px solid red; }
.ng-scope { border: 1px solid red; margin: 4px }

JavaScript

function Ctrl($scope, $rootScope) {
  $scope.title = 'My Title';
  $scope.text = 'This is the text of the pane element';
    $rootScope.showScope = function(e) {
       console.log(angular.element(e.srcElement).scope());
    }
}

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<div style="border: 1px solid black;">' +
         '<div style="background-color: gray">{{title}}</div>' +
         '<div ng-transclude><a ng-click="$parent.showScope($event)">show scope</a></div>' +
         '</div>',
        link: function(scope, element) {
           scope.isolate = "I'm the isolate scope";
        }
    };
});
// Click "show scope" to see the isolate scope in the log,
// which does not prototypically inherit from the parent
// scope (__proto__ references Object).
// $$nextSibling is the transcluded scope, which
// prototypically inherits from the parent scope
// (__proto__ references the parent scope).
// In both scopes, $parent references the parent scope.