Question

我正在开发一个angularjs应用程序，其中我有一个header.html文件，该文件包含在index.html文件中<div ng-include="'header.html'"></div>，其中头文件包含

<nav>
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Link1.html">Link1</a></li>
      <li><a href="Link2.html">Link2</a></li>
      <li><a href="#" id="logout">Logout</a></li>
   </ul>
</nav>

在index.html中，我有一个jquery点击动作

 $('#logout').on('click', function (e) {          
            location.href = 'login.html';          
    });

但点击事件无效。请指导我。

编辑我的 header.html文件，如下所示：

 <nav>
       <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="Link1.html">Link1</a></li>
          <li><a href="Link2.html">Link2</a></li>
          <li><a href="#" id="logout">Logout</a></li>
       </ul>
    </nav>

index.html文件：

<html>
  <head>
  </head>
  <body ng-app="app">
    <div ng-controller="mainCtrl">

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

      <!-- my index page content goes here which is built using angularjs logic -->

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

    </div>
    <script src="call/to/jquery.js"></script>
    <script src="scripts/logout.js"></script>
    <script>
      var app = angular.module('app', []);
      app.controller('mainCtrl', function($scope, $sce, $q, $http) {
        // my angularjs logics...
      });
    </script>
  </body>
</html>

logout.js文件：

$(document).ready(function() {
  $('#logout').on('click', function(e) {
   if(somecondition)
    location.href = 'login.html';
   else
        alert('Oops something went wrong!');
  });
});

我还有另外两个文件link1.html和link2.html

Answer 1

最简单的事情是：

<li><a href="index.html" id="logout">Logout</a></li>

当您使用角度应用程序时，您也可以使用路径配置来执行此操作：

<nav>
   <ul>
      <li><a href="/index">Home</a></li>
      <li><a href="/Link1">Link1</a></li>
      <li><a href="/Link2">Link2</a></li>
      <li><a href="/index" id="logout">Logout</a></li>
   </ul>
</nav>

app.config(function($routeProvider) {
    $routeProvider.when('/index', {
        templateUrl : 'path/index.html',
        controller  : 'homeCtrl'
    })
    ...other routes
    .otherwise({redirect:'/index'})

在ng-include文件中应用jquery click事件

1 个答案: