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

【问题标题】：apply jquery click event inside ng-include file在 ng-include 文件中应用 jquery click 事件
【发布时间】：2016-02-04 17:40:49
【问题描述】：

我正在开发一个 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

【问题讨论】：

在 header.html 上编写 jquery 函数，或者您可以共享 index.html 的代码
它不起作用，因为在调用 .on 方法时，logout 链接还不存在
详细代码请看编辑

标签： jquery angularjs onclick

【解决方案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'})

【讨论】：