Angular: Empty Fiddle

http://angularjs.org/

by Jérôme Beau

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <parent>
        <child></child>
    </parent>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.obj = {prop:'foo'};
}

myApp.directive('parent', function() {
    return {
        scope: true,
        transclude: true,
        restrict: 'EA',
        template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
        controller: function($scope) {
            $scope.SOME_CONST = 'SOME_CONST';
            this.SOME_CONST = $scope.SOME_CONST;
        },
        controllerAs: 'myParent',
        bindToController: true
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        scope:true,
        template: '<h1>I\'m child.... I want to access my parent\'s stuff, but I can\'t.  I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function?  is this even a good idea? {{myParent.SOME_CONST}}.  I really don\'t want to put everything inside the MyCtrl',
    }
});