1. 首页
  2. 问答
  3. 为什么javascript不能加载我的部分？

为什么javascript不能加载我的部分？

2016-12-28 51 views
0

嗨，我是新来角和试图执行slick carousel它工作正常index页但当我在部分使用相同的HTML和使用ng-view它不起作用。为什么javascript不能加载我的部分？

我index文件看起来

<!DOCTYPE html> 
<html lang="en" ng-app="mallsOnline"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1">  

     <!-- Favicon --> 
     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> 

     <!-- Font awesome --> 
     <link href="css/font-awesome.css" rel="stylesheet"> 
     <!-- Bootstrap --> 
     <link href="css/bootstrap.css" rel="stylesheet"> 
     <!-- slick slider --> 
     <link rel="stylesheet" type="text/css" href="css/slick.css"> 
     <!-- price picker slider --> 
     <link rel="stylesheet" type="text/css" href="css/nouislider.css"> 
     <!-- Theme color --> 
     <link id="switcher" href="css/theme-color/default-theme.css" rel="stylesheet">  

     <!-- Main style sheet --> 
     <link href="css/style.css" rel="stylesheet">  
     <link href="css/mystyles.css" rel="stylesheet" type="text/css"/> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.css" rel="stylesheet" /> 
<!--  <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" type='text/css' media='all' />--> 
     <link rel="stylesheet" href="css/loading-bar.css" type="text/css">  <!-- Google Font --> 

     <!-- Google Font --> 
     <link href='https://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>  
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 


     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 

    </head> 
    <body class="aa-price-range"> 
     <!-- SCROLL TOP BUTTON --> 
     <a class="scrollToTop" href="#"><i class="fa fa-angle-double-up"></i></a> 
     <!-- END SCROLL TOP BUTTON --> 
     <!-- Start header section --> 
     <header id="aa-header"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="aa-header-area"> 
          <div class="row"> 
           <div class="col-md-6 col-sm-6 col-xs-6"> 
            <div class="aa-header-left"> 
             <div class="aa-email hidden-xs"> 
              <span class="fa fa-envelope-o"></span> [email protected] 
             </div> 
            </div>    
           </div> 
           <div class="col-md-6 col-sm-6 col-xs-6"> 
            <div class="aa-header-right"> 
             <div ng-if="$root.auth_token && $root.role === '20'"> 
              <a href="#/dashboard" class="aa-login">DashBaord</a> 
             </div> 
             <div ng-if="$root.auth_token && $root.role === '10'"> 
              <a href="#/consumer-dashboard" class="aa-login">DashBaord</a> 
             </div> 
             <div> 
              <a href="#/register" class="aa-register" >Register</a> 
              <a href="#/signin" class="aa-login">Login</a> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </header> 
     <!-- End header section --> 

     <!-- Start menu section --> 
     <section id="aa-menu-area"> 
      <nav class="navbar navbar-default main-navbar" role="navigation"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <!-- FOR MOBILE VIEW COLLAPSED BUTTON --> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <!-- LOGO -->            

         <!-- Image based logo --> 
         <a class="navbar-brand aa-logo-img" href="#/index"><img src="img/logo.png" alt="logo"></a> 
        </div> 
        <div id="navbar" class="navbar-collapse collapse"> 
         <ul id="top-menu" class="nav navbar-nav navbar-right aa-main-nav"> 
          <li class="navcss"><a href="#/index">HOME</a></li> 
          <li class="navcss"><a href="#/contact">CONTACT US</a></li> 
         </ul>        
        </div><!--/.nav-collapse -->  
       </div>   
      </nav> 
     </section> 

     <!-- End menu section --> 
     <div ng-view></div> 

     <!-- Client brand/This is the slick crousel--> 
    <section id="aa-client-brand"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="aa-client-brand-area"> 
      <ul class="aa-client-brand-slider"> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-1.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-2.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-3.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-5.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-4.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-1.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-2.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-3.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-5.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-4.png" alt="brand image"> 
       </div> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 
    <!--/Client brand --> 
     <footer id="aa-footer"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="aa-footer-area"> 
          <div class="row"> 
           <div class="col-md-4 col-sm-6 col-xs-12"> 
            <div class="aa-footer-left"> 
             <p>Powered by <a rel="nofollow" href="http://www.centangle.com/">Centangle Interactive Pvt Limited</a></p> 
            </div> 
           </div> 

          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </footer> 
     <!--/Footer --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script> 
     <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script> 
     <script src="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.js" type="text/javascript"></script> 
     <link href="css/ng-img-crop.css" rel="stylesheet" type="text/css"/> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script> 
     <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script> 
     <script src="js/app.js" type="text/javascript"></script> 
     <!-- ui-select files --> 
     <script src="js/select.js" type="text/javascript"></script> 
     <link href="css/select.css" rel="stylesheet" type="text/css"/> 
     <script src="js/controller.js" type="text/javascript"></script> 
     <script src="js/add_product.js" type="text/javascript"></script> 
     <script src="js/ng-file-upload.min.js" type="text/javascript"></script> 
     <script src="js/ng-file-upload-shim.min.js" type="text/javascript"></script> 
     <script src="js/service.js" type="text/javascript"></script> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">  
     <script src="https://code.angularjs.org/1.5.8/angular-cookies.min.js" type="text/javascript"></script> 
     <!-- jQuery library --> 
     <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> --> 
     <script src="js/jquery.min.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="js/bootstrap.js"></script> 
     <!-- slick slider --> 
     <script type="text/javascript" src="js/slick.js"></script> 
     <!-- Price picker slider --> 
     <script type="text/javascript" src="js/nouislider.js"></script> 

     <!-- Custom js --> 
     <script src="js/custom.js"></script> 
    <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class': 'toast-top-right'}"></toaster-container> 

</body> 
</html>

，这是我partial这里我想说明这一点，但它不工作。

我product页

<!-- Client brand --> 
    <section id="aa-client-brand"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="aa-client-brand-area"> 
      <ul class="aa-client-brand-slider"> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-1.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-2.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-3.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-5.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-4.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-1.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-2.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-3.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-5.png" alt="brand image"> 
       </div> 
       </li> 
       <li> 
       <div class="aa-client-single-brand"> 
        <img src="img/client-brand-4.png" alt="brand image"> 
       </div> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section>

我app.js

when('/product/:productId', { 
       templateUrl: 'partials/product.html', 
       controller: 'ProductController', 
       resolve: { 
        mallsOnline: function ($q, checkAuth) { 
         $q.defer(); 
         return checkAuth.get(); 
        } 
       } 
      }).

来源

2016-12-28 Usman Iqbal

+0

如何你渲染的部分？只显示相关数据 – SaiUnique

+0

通过$ routeProvider –

+0

请参阅我的app.js请 –

回答

0

我认为你在与诺路由器已经错误......你为什么

mallsOnline: function ($q, checkAuth) { 
        $q.defer(); 
        return checkAuth.get(); 
       }

也许不是：

mallsOnline: function ($q, checkAuth) { 
          var deferred= $q.defer(); 
          checkAuth.get().then(function(resp){ 
           deferred.resolve(resp); 
           },function(err){ 
          deferred.reject(err); 
            })); 

    return deferred.promise; 
         }

来源

2016-12-28 10:06:49

+0

删除后我检查了两次 –

+0

没有什么变化？ –

+0

是的没有改变 –

0

试试做一个指令..例如：

“use strict”;

app.directive('carousel', function ($timeout) { 
    return { 
     restrict: 'AE', 

     link: function (scope, element, attrs) { 

      $timeout(function() { 
       var $container = $(element); 
       // initialize 

       $('.carousel').carousel(); 


      }); 
     } 

    }; 
});

，然后使用它：

<div class="container" carousel>

来源

2016-12-28 10:31:46

相关问题

 相关问题