2017-10-22 148 views
0

当试图使用IE11进行导航时,链接不能与状态(如url: '/main-category/:id')一起使用,但“父”状态url: '/:main-category/'正常工作。这些不是真正的嵌套或父子,因为除导航外,它们实际上并不共享任何常见的视图/ html模板。是这些ui-sref状态ie11友好

我发现this meta tag建议和这IE events建议,但似乎都没有提供解决方案,为什么我的导航栏和来自另一个州的链接不起作用。

这里是一个live site没有minify,测试比较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

例子的NavBar部分

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

回答

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

+0

感谢这个好找;) –