为什么$ location不能使用angular进行鼠标悬停？它不会将我重定向到另一个页面

Question

我正在尝试根据光标所在的链接显示页面。因此，如果光标位于“Page 1”链接上，它将显示page1.html。但是当我盘旋时，没有任何反应。仅当我点击链接时它才会转到该页面。也许我没有正确地注入$ location，或者我还需要别的东西来解雇这个事件。

这是我的代码：

controllers.js

angular.module('app', ['ngRoute'])
  .controller('mainController', function ($scope) {
      $scope.title = "Angular Hover Example";
  })

  .directive('redirectOnHover', function ($location) {
      return {
          link: function (scope, element) {
              element.bind('mouseover', function (e) {
                  var address = element.attr('href');
                  address = address.substring(1, (address.length - 1)); //address is page1

                  scope.$apply(function () {
                      $location.path('/' + address);
                })
            })
        }
    }
  })
  .config(function ($routeProvider) {
      $routeProvider
        .when('/page1', {
            templateUrl: './pages/page1.html'
        })

的index.html

    <ul>
        <li><a redirect-on-hover id="button1" href="#page1">Page 1</a></li>
        <li><a redirect-on-hover id="button2" href="#page2">Page 2</a></li>
        <li><a redirect-on-hover id="button3" href="#page3">Page 3</a></li>
        <li><a redirect-on-hover id="button4" href="#page4">Page 4</a></li>
    </ul>