Directives for show part of some template in other template

portal.js

'use strict';

angular
    .module('portal', [''])
    .directive('portalIn', [function() {
        return {
            scope: {
                key: '@',
                portalContainer: '='
            },
            link: {
                pre: function($scope, $element) {
                    if ($scope.key) {
                        if (angular.isObject($scope.portalContainer[$scope.key])) {
                            angular.extend(
                                $scope.portalContainer[$scope.key],
                                {
                                    scope: $scope.$parent,
                                    template: $element.html(),
                                    trigger: true
                                }
                            );
                        } else {
                            $scope.portalContainer[$scope.key] = {
                                scope: $scope.$parent,
                                template: $element.html(),
                                trigger: true
                            }
                        }
                    }
                    $element.remove();
                }
            }
        }
    }])
    .directive('portalOut', ['$compile', function($compile) {
        return {
            scope: {
                key: '@',
                portalContainer: '='
            },
            link: function($scope, $element) {
                $scope.$watch(
                    function() {
                        return $scope.portalContainer[$scope.key]
                            ? $scope.portalContainer[$scope.key].trigger
                            : undefined;
                    },
                    function(showContent) {
                        if (showContent && angular.isObject($scope.portalContainer[$scope.key])) {
                            var content = $compile(
                                $scope.portalContainer[$scope.key].template
                            )($scope.portalContainer[$scope.key].scope);
                            $element.empty().append(content);
                            delete $scope.portalContainer[$scope.key].trigger;
                        }
                    }
                );
            }
        }
    }])
;