Angular: Parent Child Directive

http://angularjs.org/

by Nitish Kumar

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{name}}!
    
    <span my-parent-control my-child-control >CHILD</span>
  
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}

myApp.directive("myParentControl", function() {
    return {
        restrict: "A",
        scope: {},
       
        controller: function($scope) {
            $scope.propertyOne = "PropertyOne"
    },

    link: function(scope, element) {
        scope.propertyOne = "PropertyOne"
    }
  }
});

myApp.directive("myChildControl", function() {
    return {
        require: "^myParentControl",
        link: function(scope, element, attrs, myParentControl) {
            //Undefined
            console.log(scope.propertyOne);
            //Not visible in scope inspector
            myParentControl.newValue = "New Value";
        }
    }
})