Blueimp 图库在启用 html5mode 时无法在角度下工作

我正在构建我的第一个角度应用程序，一切都很顺利，直到我想从URL中删除"#"。
到目前为止，我已经构建了以下内容：

应用.js

var app = angular.module('mosaic', ['ngRoute', 'appServices', 'appControllers', 'appDirectives']);
var appServices = angular.module('appServices', []);
var appControllers = angular.module('appControllers', []);
var appDirectives = angular.module('appDirectives', []);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
    when('/', {
        templateUrl: 'http://54.67.25.157/login',
        controller: 'AuthenticationController'
    }).
    when('/activate', {
        templateUrl: 'http://54.67.25.157/activate'
    }).
    when('/mosaic', {
        templateUrl: 'http://54.67.25.157/mosaic',
        access: { requiredAuthentication: true }
    }).
    otherwise({
        redirectTo: '/'
    });
            //$locationProvider.html5Mode(true);
            //$locationProvider.hashPrefix('!');
}]);

app.config(function($httpProvider) {
    $httpProvider.interceptors.push('TokenInterceptor');
});
app.run(function($rootScope, $location, $window, AuthenticationService) {
     $rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
    if(nextRoute != null && nextRoute.access != null && nextRoute.access.requiredAuthentication 
    && !AuthenticationService.isAuthenticated && !$window.sessionStorage.token) {
        $location.path("/");
    }
  });
});

这是我的 html 文件：

<body style="" class="ng-scope" ng-app="mosaic">
  <!-- ngView:  --><div class="container ng-scope" ng-view=""><h4 class="ng-scope"> Hi ABC, </h4>
<div style="height: 402px;" class="ng-scope justified-gallery" id="links" gallery="">

  <a style="width: 300px; height: 400px; top: 1px; left: 1px; opacity: 1;" href="/media/DPMosaic_jmJyQrc.jpg" class="justified-gallery jg-entry" ng-href="/media/DPMosaic_jmJyQrc.jpg" title="./DPMosaic_jmJyQrc.jpg" data-gallery="">
    <img style="width: 300px; height: 400px; margin-left: -150px; margin-top: -200px;" src="/media/DP_thumbnail_Ktojkqa.jpg">
  <div style="opacity: 0; display: block;" class="caption">./DPMosaic_jmJyQrc.jpg</div></a>

  <a style="width: 533px; height: 400px; top: 1px; left: 302px; opacity: 1;" href="/media/testMosaic_5HF2z0K.jpg" class="justified-gallery jg-entry" ng-href="/media/testMosaic_5HF2z0K.jpg" title="./testMosaic_5HF2z0K.jpg" data-gallery="">
    <img style="width: 533px; height: 400px; margin-left: -266.5px; margin-top: -200px;" src="/media/test_thumbnail_ng2FmDO.jpg">
  <div style="opacity: 0; display: block;" class="caption">./testMosaic_5HF2z0K.jpg</div></a>

</div>

我已经定义了对齐的图库指令，整个设置工作正常，直到我在应用程序中取消注释 2 行.js
这 2 行是：

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

HTML 的 head 部分也包含基本 href="/"。我这样做是为了删除 URL 中的"#"，并且运行良好的应用程序停止工作。
通过停止工作，我的意思是当我点击 html 中的图像链接时，它曾经在轮播中打开画廊。包含上述行后，我被重定向回我的主页，并在我的 Firefox 控制台上出现以下错误。

blueimp 画廊：没有提供或空列表作为第一个参数。对象 { length： 0， prevObject： Object， context： HTMLDocument → 54.67.25.157，选择器："[数据库="]

我是AngularJS的新手，不知道可能出了什么问题。请帮助我。如果您想了解有关该应用程序的其他详细信息，请告诉我。该应用程序托管在 http://54.67.25.157/account

提前感谢！

试试这个指令：

;(function(
  angular, $
) {
  'use-strict';
  angular.module('mosaic').directive('a', [
    function blueImpFix() {
      function prevent(e) {
        e.preventDefault();
      }
      function unprevent() {
        $(this).unbind('click', prevent);
      }
      return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
          if('gallery' in attrs) {
            elem.bind('click', prevent).on('$destroy', unprevent);
          }
          return elem;
        }
      };
    }
  ]);
})(
  window.angular,
  window.jQuery
);

上述解决方案的更简洁版本。

在设置数据库="的标签上设置 ng 单击

标记

  <a ng-click="handleClick($event)" style="width: 300px; height: 400px; top: 1px; left: 1px; opacity: 1;" href="/media/DPMosaic_jmJyQrc.jpg" class="justified-gallery jg-entry" ng-href="/media/DPMosaic_jmJyQrc.jpg" title="./DPMosaic_jmJyQrc.jpg" data-gallery="" >

然后防止控制器/指令中的事件传播：

$scope.handleClick = function (event) {
  event.preventDefault();
};

相关内容

最新更新

热门标签：