在Angular UI Router中，出现了一个问题，即如何实现没有父状态的子状态。以下是这个问题出现的原因和解决方法。

在这个讨论中，某些情况下了在他的Angular应用程序中使用一个单一的状态作为整个应用程序的父状态。他通过以下代码定义了这个根状态：

$stateProvider
    .state('app', {
        url: '/',
        templateUrl: '/scripts/app/app/views/app.html',
        controller: 'appController',
        resolve: {
            //在这里解析任何应用程序的全局数据
        }
    });

然后他可以将模态框作为这个状态的子状态。这样，当模态框关闭时，他可以始终返回到这个路由，回到应用程序的默认状态。

这种做法的另一个好处是，您可以使用该路由的视图作为布局，放置任何从页面到页面都不会改变的标记（头部，侧栏等）。

然后有人提出了一个问题，即如果他有一个根状态（url: '/'），而他的模态框是根状态的子状态（url: 'my-modal'），但他希望从用户个人资料状态（url: 'profile/{uid}'）查看模态框，是否可以在"/profile/123/my-modal"（个人资料状态和模态框状态）的URL上显示模态框层在个人资料页面上方？

对此，另一个人意识到了问题，认识到之前的回答并没有解决这个问题。他表示需要进一步思考。

这个问题的出现的原因是在Angular UI Router中无法直接实现没有父状态的子状态。然而，可以通过重新设计状态和URL结构来解决这个问题。例如，在这种情况下，可以将模态框状态设计为个人资料状态的子状态，而不是根状态的子状态。这样，就可以通过访问"/profile/123/my-modal"的URL来显示模态框层在个人资料页面上方。通过重新设计状态和URL结构，可以在Angular UI Router中解决没有父状态的子状态的问题。

Angular UI Router - Parentless Child States这个问题的出现的原因是在UI Router中，当需要创建一个没有父级状态的子状态时，会遇到一些困难。解决这个问题的方法是创建一个名为hashRouter的服务，通过管理查询数据的序列化和反序列化以及监控$locationChangeSuccess事件来处理URL的外部更改。

hashRouter服务的代码如下：

hashRouter.$inject = [
    '$rootScope',
    '$location'
];
function hashRouter($rootScope, $location) {
    var service = this,
        hashString = $location.hash(),
        hash = fromHashString(hashString);
    $rootScope.$on('$locationChangeSuccess', function (e, newUrl) {
        var newHashString = getHashSection(newUrl);
        if (newHashString != hashString) {
            var newHash = fromHashString(newHashString);
            service.hash(newHash.name, newHash.params);
        }
    });
    service.hash = function (name, params) {
        var oldHash = hash,
            oldHashString = hashString;
        hash = { name: name || '', params: params || {} };
        hashString = toHashString(hash);
        if (hashString !== oldHashString) {
            var oldHashExists = oldHashString.length > 0;
            if (oldHashExists) {
                $rootScope.$broadcast('hashRouteRemoved', oldHash);
            }
            if (hashString.length > 0) {
                $rootScope.$broadcast('hashRouteAdded', hash);
            }
            $location.hash(hashString);
            if (oldHashExists) {
                $location.replace();
            }
        }
    };
    return service;
    function toHashString(data) {
        var newHashString = '';
        var name = data.name;
        if (!!name) {
            newHashString += encodeURIComponent(name);
        }
        var params = data.params;
        if (!!params) {
            var paramList = [];
            for (var prop in params) {
                var key = encodeURIComponent(prop),
                    value = params.hasOwnProperty(prop) ? encodeURIComponent(params[prop].toString()) : '';
                paramList.push(key + '=' + value);
            }
            if (paramList.length > 0) {
                newHashString += ':' + paramList.join('&');
            }
        }
        return newHashString;
    }
    function fromHashString(urlHash) {
        var parsedHash = {
            name: '',
            params: {}
        };
        if (!!urlHash && urlHash.length > 0) {
            if (urlHash.indexOf(':') !== -1) {
                var hashSegments = urlHash.split(':');
                parsedHash.name = decodeURIComponent(hashSegments[0]);
                var querySegments = hashSegments[1].split('&');
                for (var i = 0; i < querySegments.length; i++) {
                    var pair = querySegments[i].split('=');
                    parsedHash.params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]) || null;
                }
            } else {
                parsedHash.name = decodeURIComponent(urlHash);
            }
        }
        return parsedHash;
    }
    function getHashSection(url) {
        if (url.indexOf('#') === -1 || (url.indexOf('#!') !== -1 && url.indexOf('#') === url.lastIndexOf('#'))) {
            return '';
        }
        var urlSegments = url.split('#');
        return urlSegments[urlSegments.length - 1];
    }
}
angular.module('myApp').service('hashRouter', hashRouter);

这个服务的一些要注意的事项有：

1. 我自己编写了序列化/反序列化函数，它们并不完善，所以使用时请自己承担风险，或者用更合适的替代品。

2. 这依赖于在非html5模式下使用hash-bang的部分（#!而不是#）。

3. 如果你要操作序列化/反序列化功能，请非常小心：我发现自己陷入了一些无限循环的情况，导致浏览器崩溃。所以一定要进行充分的测试！

4. 你仍然需要在打开/关闭使用该服务的对话框/菜单等时调用该服务，并根据需要监听hashRouteAdded和hashRouteRemoved事件。

5. 我构建了这个系统仅支持一个视图一次 - 如果需要多个视图，则需要自定义代码（虽然我想它可以轻松支持嵌套视图）。

希望这个解决方案能够为其他有类似需求的人节省一些时间。