在index.html中找不到加载了ng-include的AngularJS元素ID?

时间:2016-11-21 09:06:25

标签: angularjs

因此流程是我访问/然后脚本加载main.html,其中包含header.html然后注入index.html中的ng-view

以下是详细信息

我的index.html

<!DOCTYPE HTML>
<html>

<head>
    <title>Koupon - Index</title>
    <!-- meta info -->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="keywords" content="Koupon HTML5 Template" />
    <meta name="description" content="Koupon - Premiun HTML5 Template for Coupons Website">
    <meta name="author" content="Dark Cyber" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google fonts -->
    <!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600' rel='stylesheet' type='text/css'> -->
    <!-- <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> -->
    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/boostrap_responsive.css">
    <!-- Font Awesome styles (icons) -->
    <link rel="stylesheet" href="css/font_awesome.css">
    <!-- Main Template styles -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- IE 8 Fallback -->
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

    <!-- Your custom styles (blank file) -->
    <link rel="stylesheet" href="css/mystyles.css">

    <!-- Backend Style -->

    <!-- End Backend Style -->

</head>

<body ng-app="rentalkika">



<!-- //// START PAGE CONTENT -->

    <div ng-view>

   </div>

<!-- END PAGE CONTENT /// -->


    <!-- Scripts queries -->
    <script src="js/jquery.js"></script>
    <script src="js/boostrap.min.js"></script>
    <script src="js/nivo_slider.min.js"></script>
    <script src="js/countdown.min.js"></script>



    <script src="js/magnific.min.js"></script>
    <script src="js/tweet.min.js"></script>

     <!--   
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script src="js/gmap3.min.js"></script>
    -->
    <script src="js/wilto_slider.min.js"></script>
    <script src="js/mediaelement.min.js"></script>
    <script src="js/fitvids.min.js"></script>
    <script src="js/mail.min.js"></script>
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.js"></script>
     <script src="js/ng-file-upload-shim.js"></script>
     <script src="js/ng-file-upload.js"></script>
     <script src="js/app.js"></script>
     <script src="js/flexnav.min.js"></script>


    <!-- Custom scripts -->
    <script src="js/custom.js"></script>
    <script type="text/javascript" >
    if($('#something').length){
        alert('something found');
        //I want to init plugin with #something here    
    }else{
        alert('something not found');    
    }
    </script>

    <!-- Backend JS -->

    <!-- End Backend JS -->

</body>

</html>

app.js

$routeProvider
.when('/', {
    templateUrl : 'pages/main.html',    
    title: "Home"
})

main.html

<div ng-include="'header.html'"></div>



<!-- TOP AREA -->
    <div class="top-area">
        <!-- START BOOTSTRAP CAROUSEL -->
        <div id="my-carousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item">
                    <img src="img/1200x480.png" alt="Image Alternative text" title="Old No7" />
                    <div class="carousel-caption countdown-caption">
                        <h3>Jack Daniels Huge Pack</h3>
                        <!-- COUNTDOWN -->
                        <div data-countdown="Aug 25, 2013 5:30:00" class="countdown"></div><a href="#" class="btn btn-primary btn-large">Save 70%</a>
                    </div>
                </div>
                <div class="item">
                    <img src="img/1200x480.png" alt="Image Alternative text" title="iPhone 5 iPad mini iPad 3" />
                    <div class="carousel-caption countdown-caption">
                        <h3>Apple Big Deal</h3>
                        <!-- COUNTDOWN -->
                        <div data-countdown="Aug 30, 2013 10:45:00" class="countdown"></div><a href="#" class="btn btn-primary btn-large">Save 50%</a>
                    </div>
                </div>
                <div class="item">
                    <img src="img/1200x480.png" alt="Image Alternative text" title="the best mode of transport here in maldives" />
                    <div class="carousel-caption countdown-caption">
                        <h3>Finshing in Maldives</h3>
                        <!-- COUNTDOWN -->
                        <div data-countdown="Sep 2, 2013 22:00:00" class="countdown"></div><a href="#" class="btn btn-primary btn-large">Save 30%</a>
                    </div>
                </div>
            </div>
            <a class="carousel-control left" href="#my-carousel" data-slide="prev"></a>
            <a class="carousel-control right" href="#my-carousel" data-slide="next"></a>
        </div>
        <!-- END BOOTSTRAP CAROUSEL -->
    </div>
    <!-- END TOP AREA -->


<div ng-include="'footer.html'"></div>

header.html

    <!-- //////////////////////////////////
//////////////MAIN HEADER///////////// 
////////////////////////////////////-->
<div id="something">
</div>

    <header class="main">
        <div class="container">
            <div class="row">
                <div class="span2">
                    <a href="index.html">
                        <img src="img/logo-small.png" alt="logo" title="logo" class="logo">
                    </a>
                </div>
                <div class="span8">
                    <!-- MAIN NAVIGATION -->
                    <div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
                    <nav>
                        <ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
                            <li class="active"><a href="index.html">Home</a>
                            </li>
                            <li><a href="#">Layanan</a>
                                <ul>
                                    <li><a href="#sewa_mobil">Sewa Mobil</a>
                                    </li>
                                    <li><a href="#">Shuttle</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Paket Wisata</a>
                                        <ul>
                                            <li><a href="#">xxx</a></li>                                        
                                            <li><a href="#">bbb</a></li>                                        
                                        </ul>                            
                            </li>
                            <li><a href="blog-sidebar-right.html">Blog</a>
                            </li>
                                 <li><a href="#">FAQ</a>
                            </li>
                            <li><a href="#register_partner">Tertarik menjadi mitra kami?</a></li>
                            <li><a href="#contact">Contact</a>
                            </li>
                        </ul>
                    </nav>
                    <!-- END MAIN NAVIGATION -->
                </div>
                <div class="span2">
                    <!-- LOGIN REGISTER LINKS -->
                    <ul class="login-register" ng-controller="LoginController">

                        <li ng-hide="loggedIn"><a class="popup-text" href="#login-dialog" data-effect="mfp-move-from-top"><i class="icon-signin"></i>Sign in</a>
                        </li>
                        <li ng-show="loggedIn"><a href="#" ng-click="logout()"><i class="icon-signout"></i>Sign out</a>
                        </li>

                        <li><a href="#register"><i class="icon-edit"></i>Sign up</a>
                        </li>

                           <!-- LOGIN REGISTER LINKS CONTENT -->
    <div id="login-dialog" class="mfp-with-anim mfp-hide mfp-dialog clearfix">
        <i class="icon-signin dialog-icon"></i>
        <h3>Member Login</h3>
        <h5>Welcome back, friend. Login to get started</h5>
        <div class="row-fluid">
            <form class="dialog-form" ng-submit="handleLogin()" >
                <label>Username</label>
                <input type="text" placeholder="yourUsername" ng-model="login.username" class="span12">
                <label>Password</label>
                <input type="password" placeholder="My secret password" ng-model="login.password" class="span12">
                <label class="checkbox">
                    <input type="checkbox">Remember me
                </label>
                <div class="control-group error" ng-show="error">
                <span class="error help-block">
                    {{ error }}
                </span>
                </div>
                <input type="submit" value="Sign in" class="btn btn-primary">
                <button ng-click="FBLogin()" class="btn btn-primary">Login with Facebook</button>
            </form>
        </div>
        <!--
        <ul class="dialog-alt-links">
            <li><a class="popup-text" href="#register-dialog" data-effect="mfp-zoom-out">Not member yet</a>
            </li>
            <li><a class="popup-text" href="#password-recover-dialog" data-effect="mfp-zoom-out">Forgot password</a>
            </li>
        </ul>
        -->
    </div>
                    </ul>
                </div>
            </div>
        </div>
    </header>



    <div id="password-recover-dialog" class="mfp-with-anim mfp-hide mfp-dialog clearfix">
        <i class="icon-retweet dialog-icon"></i>
        <h3>Password Recovery</h3>
        <h5>Fortgot your password? Don't worry we can deal with it</h5>
        <div class="row-fluid">
            <form class="dialog-form">
                <label>E-mail</label>
                <input type="text" placeholder="email@domain.com" class="span12">
                <input type="submit" value="Request new password" class="btn btn-primary">
            </form>
        </div>
    </div>
    <!-- END LOGIN REGISTER LINKS CONTENT -->

    <!-- //////////////////////////////////
//////////////END MAIN HEADER////////// 
////////////////////////////////////-->

上述脚本会提醒something not found,但如果我将<div id="something"></div>直接发送到index.html,脚本会提醒something found

我在header.html中需要<div id="something"></div>然后在index.html中使用#something初始化插件

我的结构或代码有问题吗?

1 个答案:

答案 0 :(得分:0)

<form action="/cart/add" method="post">
            {% if product.options.size > 1 %}
            <fieldset class="group">
              <ul class="checkbox">
              {% for variant in product.variants %}
                {% if variant.available == true %}
                      <li>
                        <input type="radio" value="{{variant.id}}" name="id" {%if variant.id == product.selected_or_first_available_variant.id %} checked{% endif %} >
                        <label>{{ variant.title }} for {{ product.price | minus:variant.price | money_with_currency }}</label>
                      </li>
                {% else %}
                {% endif %}
              {% endfor %}
              </ul>
            </fieldset>
            {% else %}
            <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
            {% endif %}
                <input type='hidden' name='quantity' value='1'>
                <input type="submit" name="add" id="add" class="inpost-buy w-button" value="Add to Bag →"></input>
          </form>

然后在<div id="something" ng-controller="SomethingController"> </div>

SomethingController