Question

您好我是角色新手并尝试实施slick carousel它在index页面中工作正常但是当我在局部使用相同的html并使用ng-view时它不起作用。< / p>

我的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> info@mallsonline.com
                                        </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();
                    }
                }
            }).

Answer 1

我认为您的路由器中存在错误信息......为什么会这样做

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

Answer 2

尝试制定一个指令......像这样：

＆＃34;使用严格＆＃34 ;;

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>

为什么javascript没有加载到我的部分？

2 个答案: