Question

app.js

中的

$routeProvider.when('/', {
    templateUrl : appUrl + '/index.html',
    controller : 'HomePageController'
});

controller.js

中的

angular.module('PoliticalOrg').controller('HomePageController',function(   $scope ) {

$scope.Login= function () {
alert("s");
 }
 });

index.html

中的

＆＃13;

<!DOCTYPE html>
     <html lang="en" ng-app="PoliticalOrg">
      <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
      <meta charset="utf-8">
    <title>Organization</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=no">
    <meta content="" name="description">
    <meta content="" name="author">

       <link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet"   type="text/css" media="screen">
     <!-- BEGIN CORE CSS FRAMEWORK -->
        <link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <link href="assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
     <link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css">
    <!-- END CORE CSS FRAMEWORK -->
    <script src="libs/vendor/angularJS/angular.min.js"></script>
      <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
	
    <script src="js/login/config.js"></script>
    <script src="js/login/Controllers.js"></script>
    <script type="js/login/services.js"></script>
    <script type="js/globalmethods/login.js"></script>
     <!-- BEGIN CSS TEMPLATE -->
     <link href="assets/css/style.css" rel="stylesheet" type="text/css">
    <link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
    <link href="assets/css/custom-icon-set.css" rel="stylesheet" type="text/css">
    <!-- END CSS TEMPLATE -->

     <script src="js/app.js"></script>
     <script src="js/Controllers.js"></script>
 
        <script src="js/registration/config.js"></script>
        <script src="js/registration/Controllers.js"></script>
   
        <script src="js/login/config.js"></script>
         <script src="js/login/Controllers.js"></script>
        <script src="js/login/services.js"></script>
   
       <script src="js/candidate/config.js"></script>
       <script src="js/candidate/Controllers.js"></script>
       <script src="js/candidate/services.js"></script>
   
       <script src="js/submemberrequests/config.js"></script>
        <script src="js/submemberrequests/Controllers.js"></script>
        <script src="js/submemberrequests/services.js"></script>
   
        <script src="js/messages/config.js"></script>
       <script src="js/messages/Controllers.js"></script>
       <script src="js/messages/services.js"></script>
   
        <script src="js/users/config.js"></script>
         <script src="js/users/Controllers.js"></script>
         <script src="js/users/services.js"></script>
   
          <script src="js/admin/config.js"></script>
         <script src="js/admin/Controllers.js"></script>
         <script src="js/admin/services.js"></script>
   
         <script src="js/users/services.js"></script>
        <script src="js/globalmethods/map.js"></script>
        <script src="js/globalmethods/login.js"></script>
    </head>
     <!-- END HEAD -->

      <!-- BEGIN BODY -->
      <body class="boxed-layout  breakpoint-1024 pace-done grey"><div class="pace  pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
       <div class="pace-progress-inner"></div>
     </div>
     <div class="pace-activity"></div></div>
    <!-- BEGIN HEADER -->
      <div class="container">
     <div class="header navbar navbar-inverse "> 
      <!-- BEGIN TOP NAVIGATION BAR -->
       <div class="container">
        <div class="navbar-inner">
        <div class="header-seperation" style="display: none; height: 61px;"> 
            <ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">	
             <li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li>		 
            </ul>
          <!-- BEGIN LOGO -->	
          <a href="index.html"><img src="assets/img/logo.png" class="logo" alt="" data-src="assets/img/logo.png" data-src-retina="assets/img/logo2x.png" width="106" height="21"></a>
          <!-- END LOGO --> 
          <ul class="nav pull-right notifcation-center">	
            <li class="dropdown" id="header_task_bar"> <a href="index.html" class="dropdown-toggle active" data-toggle=""> <div class="iconset top-home"></div> </a> </li>
            <li class="dropdown" id="header_inbox_bar"> <a href="email.html" class="dropdown-toggle"> <div class="iconset top-messages"></div>  <span class="badge animated bounceIn" id="msgs-badge">2</span> </a></li>
            <li class="dropdown" id="portrait-chat-toggler" style="display:none"> <a href="#sidr" class="chat-menu-toggle"> <div class="iconset top-chat-white "></div> </a> </li>        
          </ul>
          </div>
          <!-- END RESPONSIVE MENU TOGGLER --> 
          <div class="header-quick-nav"> 
          <!-- BEGIN TOP NAVIGATION MENU -->
          
         <!-- END TOP NAVIGATION MENU -->
         <!-- BEGIN CHAT TOGGLER -->
          <div class="pull-right"> 
            <div class="chat-toggler">	
                    <a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
                        <div class="user-details"> 
                            <div class="username">
                                
                                 <span class="bold">Login</span>									
                            </div>						
                        </div> 
                        <div class="iconset top-down-arrow"></div>
                    </a>	
                    <div id="notification-list" style="display:none">
                        <div style="width:300px">
                           
              <div class="grid-body no-border">
              <div class="row-fluid">
                
                <p>Enter your username and password to login</p>
                <br>
                <div class="row form-row">
                  <div class="input-append col-md-10 col-sm-10 primary">
                    <input type="text" id="email" name="email" class="form-control" placeholder="someone@example.com">
                    <span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
                </div>
                <div class="row form-row">
                  <div class="input-append col-md-10 col-sm-10 primary">
                    <input type="password" id="password" name="password" class="form-control" placeholder="your password">
                    <span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
                </div>
              </div>
              <div class="form-actions">
                <div class="pull-right">
                  <button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
                  <button type="button" class="btn btn-white btn-cons-md">Clear</button>
                </div>
              </div>
            </div>
                            </div>				
                    </div>
                </div>
             
          </div>
           <!-- END CHAT TOGGLER -->
          </div> 
          <!-- END TOP NAVIGATION MENU --> 

      </div>
      <!-- END TOP NAVIGATION BAR --> 
    </div>
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
  <!-- BEGIN SIDEBAR -->
  
  <a href="#" class="scrollup to-edge">Scroll</a>
  <!-- END SIDEBAR --> 
  <!-- BEGIN PAGE CONTAINER-->
  <div class="page-content condensed" data-height="679"> 
    <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
    <div id="portlet-config" class="modal hide">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"></button>
        <h3>Widget Settings</h3>
      </div>
      <div class="modal-body"> Widget settings form goes here </div>
    </div>
    <div class="clearfix"></div>
    <div class="content">  
		<div class="page-title">	
			<h3>Home Page</h3>		
		</div>
    </div>
  </div>
<!-- BEGIN CHAT --> 

<!-- END CHAT -->
 </div>
<!-- END CONTAINER --> 
<!-- BEGIN CORE JS FRAMEWORK--> 
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> 
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script> 
<script src="assets/plugins/breakpoints.js" type="text/javascript"></script> 
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script> 
<script src="assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script> 
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<!-- END CORE JS FRAMEWORK --> 
<!-- BEGIN PAGE LEVEL JS --> 	
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>  
<script src="assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS --> 	

<!-- BEGIN CORE TEMPLATE JS --> 
<script src="assets/js/core.js" type="text/javascript"></script> 
<script src="assets/js/chat.js" type="text/javascript"></script> 
<script src="assets/js/demo.js" type="text/javascript"></script> 
<!-- END CORE TEMPLATE JS --> 

</div><div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"><div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div></div></body></html>

＆＃13;

我在app.js中提到了controller.js和index.html。这就是我面临的问题。当我单击ng-click="Login()"中定义的index.html HomePageController函数中的登录按钮时，不会调用Login函数。

Answer 1

这是因为控制器未正确加载，您尝试从index.html页面加载控制器，同时在index.html页面上包含脚本。

$routeProvider.when('/', {
    templateUrl : appUrl + '/index.html',
    controller : 'HomePageController'
});

所以您应该使用ui-view细分您的观点。将下面的内容放在home.html文件

中

<!-- BEGIN CHAT TOGGLER -->
          <div class="pull-right"> 
            <div class="chat-toggler">  
                    <a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
                        <div class="user-details"> 
                            <div class="username">

                                 <span class="bold">Login</span>                                    
                            </div>                      
                        </div> 
                        <div class="iconset top-down-arrow"></div>
                    </a>    
                    <div id="notification-list" style="display:none">
                        <div style="width:300px">

              <div class="grid-body no-border">
              <div class="row-fluid">

                <p>Enter your username and password to login</p>
                <br>
                <div class="row form-row">
                  <div class="input-append col-md-10 col-sm-10 primary">
                    <input type="text" id="email" name="email" class="form-control" placeholder="someone@example.com">
                    <span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
                </div>
                <div class="row form-row">
                  <div class="input-append col-md-10 col-sm-10 primary">
                    <input type="password" id="password" name="password" class="form-control" placeholder="your password">
                    <span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
                </div>
              </div>
              <div class="form-actions">
                <div class="pull-right">
                  <button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
                  <button type="button" class="btn btn-white btn-cons-md">Clear</button>
                </div>
              </div>
            </div>
                            </div>              
                    </div>
                </div>

          </div>
           <!-- END CHAT TOGGLER -->

并在index.html中添加ui-view而不是上面的代码。然后像这样改变路线

$routeProvider.when('/', {
    templateUrl : appUrl + '/home.html',
    controller : 'HomePageController'
})

即你应该从文件而不是路线

初始化index.html

请遵循此ui-router文档。

index.html页面未在控制器中加载

1 个答案: