javascript - Angular JS 应用程序 ng-href 兼容 Web 和 Phonegap/Cordova

Question

我们有一个 Web 和 Phonegap 应用程序，它在 Web 中使用 Angular HTML5 模式，并且由于 Cordova/Phonegaps 限制，在移动应用程序中使用 HashBang 模式。直到不久之后，我们才在所有 ng-href 前面加上 #!我们很高兴转向移动和网络。解析时，Angular 会自动将 href 属性中的 hashbang url 转换为 html5 url。

我们更新到 Angular 1.5 并注意到奇怪的行为:Hashbang 链接可以在整个页面重新加载时工作(例如打开一个新选项卡)，但在单击它们并在同一页面中打开它们时则不行。 Angular 只会再次打开当前页面并附加哈希值，而不对其进行处理。

我搜索了changelog ，但没有找到有关此问题的 ng-href 或 $location 更改的任何提示。我如何设计我的链接以便它们在phonegap和网络中工作？

Answer 1

我找到了解决方案，但我希望有更好的解决方案。我创建了一个指令来覆盖 ng-href 并根据配置的平台替换链接。这样，在 Cordova 中，所有链接都是 hashbang 链接，而在网络上，所有链接都是普通链接。

在代码示例中，window.isPhonegapApp被设置为配置值来指示状态。将 myApp 替换为您的应用名称。

// directive that replaces hashbangs according to app type
angular.module('myApp')
.directive('ngHref', function($interpolate) {
return {
    priority: 99, // it needs to run after the attributes are interpolated
    link: function(scope, element, attr) {
        var attrName = 'href',
            name = 'href';

        if (attrName === 'href' &&
            toString.call(element.prop('href')) === '[object SVGAnimatedString]') {
            name = 'xlinkHref';
            attr.$attr[name] = 'xlink:href';
        }

        var normalized = attr.$normalize('ng-href');
        attr.$observe(normalized, function(value) {
            if (!value) {
                if (attrName === 'href') {
                    attr.$set(name, null);
                }
                return;
            }


            if(window.isPhonegapApp) {
                if(!value.startsWith('#!')) {
                    value = '#!' + value;
                }
            } else {
                if(value.startsWith('#!')) {
                    value = value.replace("#!", '');
                }
            }
            attr.$set(name, value);
        });
    }
};
    // kick out the old ng-href directive and overwrite it with our directive
}).decorator('ngHrefDirective', function ngClickDecorator( $delegate) {

    var filteredDelegates =  _.filter($delegate, function($directive) {
        // replace with your app name
        return $directive.$$moduleName == 'myApp';
    });

    return filteredDelegates;
});