这些ui-sref状态ie11友好

时间:2017-10-22 04:39:24

标签: angularjs angular-ui-router internet-explorer-11

尝试使用IE11导航时,链接不适用于url: '/:main-category/'等状态,但“父”状态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); }]); 正常工作。这些不是真正的嵌套或父子,因为它们实际上不共享任何常见的视图/ html模板,导航除外。

我找到了this meta tag建议和这个IE events建议,但似乎都没有提供解决方案来解释为什么我的导航栏和来自其他州的链接无法正常运行。

这是live site没有缩小,以测试比较IE11&所有其他浏览器。

那么,这些路线是否正确设置?

router.js

<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>

的index.html

示例NavBar部分

FileManager

1 个答案:

答案 0 :(得分:0)

您的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) } )