wrozka · September 6, 2013 15:51
diff --git a/popup.html b/popup.html
 <html ng-app='demo'>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script type="text/javascript">
 function Outer($scope) {
  $scope.bar = "bar from outer";

  $scope.open = function(popup) {
    $scope.$popup[popup].open();
  };
 }

 function Foo($scope) {
  $scope.foo = "foo from nested";
 }

 function PopupController($element, $attrs, $scope) {
  $scope.popup = {
    src: $attrs.src,
    isOpen: false,
    open: function() { $scope.popup.isOpen = true; },
    close: function() { $scope.popup.isOpen = false; }
  };

  $scope.$parent.$popup = $scope.$parent.$popup || {};
  $scope.$parent.$popup[$attrs.name] = $scope.popup;
 }

 angular.module('demo', ['ng']).directive('popup', function() {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'popup.html',
    controller: PopupController,
    scope: true
  }
 });
    </script>

    <script type="text/ng-template" id="foo/bar.html">
      <div ng-controller="Foo">
        <p>from nested controller {{foo}}</p>
        <p>from outer controller {{bar}}</p>
      </div>
    </script>

    <script type="text/ng-template" id="popup.html">
      <div ng-show="popup.isOpen">
        <div class="title">
          Title: <span ng-transclude></span>
        </div>
        <ng-include src="popup.src"></ng-include>
        <div class="buttons"><button ng-click="popup.close()">OK</button></div>
      </div>
    </script>
  </head>

  <body ng-controller="Outer">
    <p>bar == {{bar}}</p>

    <button ng-click="open('foo')">Open foo</button>
    <button ng-click="open('bar')">Open bar</button>

    <popup name="foo" src="foo/bar.html">Foo popup</popup>
    <popup name="bar" src="foo/bar.html">Bar popup</popup>
  </body>
 </html>