当我启用 html5mode 时，Blueimp 画廊无法正常工作

Question

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

app.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>

我已经定义了 justified gallery 指令并且整个设置工作正常，直到我取消注释 app.js
中的 2 行这两行是：

$locationProvider.html5Mode(true);

$locationProvider.hashPrefix('!');

HTML 的头部部分也包含基本 href="/"。我这样做是为了删除 URL 中的“#”，并且运行良好的应用程序停止工作。
停止工作是指当我单击 html 中的图像 link 时，它曾经在轮播中打开图库。包括以上几行后，我被重定向回我的主页，并在我的 firefox 控制台上出现以下错误。

blueimp Gallery: No or empty list provided as first argument." Object { length: 0, prevObject: Object, context: HTMLDocument → 54.67.25.157, selector: "[data-gallery=""]

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

提前致谢！

Answer 1

试试这个指令：

;(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
);

Answer 2

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

在设置了 data-gallery=""

的标签上设置 ng-click

  <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="" >

然后阻止 controller/directive 中的事件传播：

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

当我启用 html5mode 时，Blueimp 画廊无法正常工作

Blueimp gallery not working in angularness when I enable html5mode

angularjs

blueimp

angular-routing