Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="app" ng-app="app" ng-controller="AppController">
  <div outer-directive ctrl-fn="ctrlFn">
    
    <div inner-directive></div>
    
  </div>
</div>
</body>
</html>
 
​
 
var app = angular.module('app', []);
​
app.controller('AppController', function($scope) {
  $scope.ctrlFn = function() {
    alert('hello');
  };
});
​
app.directive('outerDirective', function() {
  return {
    restrict: 'A',
    scope: {
      ctrlFn : '='
    },
    controller: function OuterDirectiveController($scope) {
      this.outerFunction = function () {
        return $scope.ctrlFn();
      };
    },
    transclude:true,
    template: '<div ng-transclude></div>'
  };
});
​
app.directive('innerDirective', function() {
  return {
    replace:true,
    template: '<button ng-click="innerFunction()">Child Directive</button>',
    link: function(scope, element, attributes, outerDirective) {
      scope.innerFunction = function() {
        outerDirective.outerFunction();
      };
    },
    scope: {},
    require: '^outerDirective'
  };
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers