Angular directive require controller

by Kyrylo Slatin

HTML

<div ng-controller="ctrlr">
    <input ng-model="myEvent">
    <div class='customContainer' ng-click="addDirective(this, 123)">Add directive</div>
        <div>
            <my-container>
    <my-directive mydata='myEvent'>
                </my-container>
            </div>
</div>
        <script type="text/ng-template" id="myDirective.html">
            <div class="blah">yippee</div>
        </script>

CSS

.customContainer {
    min-width: 40px;
    min-height: 40px;
    background-color: yellow;
}

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrlr', function ($scope, $rootScope, $compile) {
    $scope.myEvent = 'initial';
    $scope.report = function handler(par){
        console.log('Done from controller. Directive passed: ' + par);
    };
    $scope.addDirective = function (element, data) {
        $scope.myEvent = data;
        $scope.mydata = data;
        element.innerHtml += ($compile("<my-directive mydata='myEvent'/>")($scope));
    };
});
angular.module('app').directive('myContainer', function () {
    return {
        restrict: 'AE',
        transclude: true,
        controller:  function($scope){
            $scope.report = function(param){
                console.log(param);
            }
        },
        template: '<div class="blah" ng-transclude></div>',
        link: function (scope, elem, attrs, ctrl) {
        }
    }
});
angular.module('app').directive('myDirective', function () {
    return {
        require: '^myContainer',
        restrict: 'AE',
        templateUrl: 'myDirective.html',
        link: function (scope, elem, attrs, ctrl) {
            //ctrl = elem.parent().controller();
            console.log(scope.mydata); //inspecting scope shows that mydata is undefined
            //console.log(ctrl.mydata);
            //if(ctrl)ctrl.report('got access to controller');
            scope.$watch('myEvent', function(newVal){
                console.log(newVal);
            });
            scope.report('i am a custom directive');
        }
    }
});
angular.bootstrap(document, ['app']);