Child directive setting value in parent directive's scope

by rrosen326

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.1.3/angular.min.js"></script>
<div ng-controller="parentController">
    <parent-dir dir-data="display this data">
        <child-dir></child-dir>
    </parent-dir>
</div>

JavaScript

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

  testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) {
      console.log('parentController scope id = ', $scope.$id);
      $scope.ctrl_data = "irrelevant ctrl data";
  }]);

  testapp.directive('parentDir', function factory() {
      return {
          restrict: 'ECA',
          scope: {
              ctrl_data: '@'
          },
          template: '<div><b>parentDir scope.dirData:</b> {{dirData}} <div class="offset1" ng-transclude></div> </div>',
          replace: false,
          transclude: true,
          link: function (scope, element, attrs) {
              scope.dirData = attrs.dirData;
              console.log("parent_dir scope: ", scope.$id);
          }
      };
  });

  testapp.directive('childDir', function factory() {
      return {
          restrict: 'ECA',
          template: '<h4>Begin child directive</h4><input type="text"  ng-model="dirData" /></br><div><b>childDir scope.dirData:</b> {{dirData}}</div>',
          replace: false,
          transclude: false,
          link: function (scope, element, attrs) {
              console.log("child_dir scope: ", scope.$id);
              scope.dirData = "No, THIS data!"; // default text
          }
      };
  });