这些 ui-sref 状态是否对 ie11 友好

Question

尝试使用 IE11 导航时，链接在 url: '/main-category/:id' 等状态下不起作用，但 "parent" 状态 url: '/:main-category/' 工作正常。它们不是真正的嵌套或父子关系，因为它们实际上不共享任何通用的 views/html 模板，导航除外。

我找到了 this meta tag suggestion and this IE events 建议，但似乎都没有提供解决方案，说明为什么我的导航栏和来自其他州的链接不起作用。

这里是 live site 没有缩小，测试比较 IE11 和所有其他浏览器。

那么，这些路由设置正确吗？

router.js

angular.module('app_litsco')
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', { //this state works
                url: '/',
                templateUrl: 'html/home.html',
                controller: 'controller_home',
            })
            .state('product_streamline', {  //this state DOES NOT work
                url: '/streamline_metal_panels/:id',
                templateUrl: 'html/template_product.html',
                controller: 'controller_prods',
            })
            .state('streamline_panels', { //this state works
                url: '/:cat',
                templateUrl: 'html/template_productlist.html',
                controller: 'controller_productlist',
            })

        $locationProvider.html5Mode(true);
    }]);

index.html

导航栏部分示例

<li class="link">
    <!-- Main Category link -->
    <a data-activates="streamline-panel-dropdown" class="blue-text text-darken-4 product-link" ui-sref="streamline_panels({ cat: 'streamline_metal_panels' })">STREAMLINE METAL PANELS</a>
    <div id="streamline-panel-dropdown" class="dropdown-content dropdown-full full">
        <div class="container dropdown-container flex-row-around-center">
            <div class="col sm12 m3 text-center dropdown-item">
    <!-- Sub-Category links -->
                <a ui-sref="product_streamline({ id: 'classic_cr' })" class="product-link">Classic CR</a>
            </div>
            <div class="col sm12 m3 text-center dropdown-item">
                <a ui-sref="product_streamline({ id: 'omniwall_md' })" class="product-link">Omniwall MD</a>
            </div>
            <div class="col sm12 m3 text-center dropdown-item">
                <a ui-sref="product_streamline({ id: 'omniwall_cl' })" class="product-link">Omniwall CL</a>
            </div>
        </div>
    </div>
</li>

Answer 1

您的 product_streamline 状态在解析中使用 Array.find()，IE 不支持。

        .state('product_streamline', {
            url: '/streamline_metal_panels/:id',
            templateUrl: 'html/template_product.html',
            controller: 'controller_prods',
            resolve: {
                product: ['factory_litsco', '$stateParams', function (factory_litsco, $stateParams) {
                    var productIdObj = factory_litsco.find(function (obj) {
                        if (obj.id === $stateParams.id) {
                            return obj;
                        }
                    });
                    return productIdObj;
                }],
                $title: ['product', function (product) {
                    return product.productName;
                }]
            }
        })

要检测此类错误，请为 $stateChangeError 添加处理程序，例如：

angular.element(document.getElementsByTagName('body')[0]).scope().$on('$stateChangeError', function() { console.log("Error", arguments) } )

这些 ui-sref 状态是否对 ie11 友好

are these ui-sref states ie11 friendly

angularjs

angular-ui-router

internet-explorer-11