Question

我正在构建我的第一个有角度的应用程序，一切顺利，直到我想删除＆＃34;＃＆＃34;来自网址。
到目前为止，我已经构建了以下内容：

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>

我已经定义了合理的图库指令，整个设置工作正常，直到我在app.js中取消注释2行为止这两行是：

$locationProvider.html5Mode(true);

$locationProvider.hashPrefix('!');

HTML的head部分包含base href =＆＃34; /＆＃34;同样。我这样做是为了删除＆＃34;＃＆＃34;在URL和工作正常的应用程序停止工作。
通过停止工作，我的意思是当我点击html中的图像链接时，它用于在旋转木马中打开图库。在包含上述行之后，我将被重定向回我的主页，并在我的firefox控制台上出现以下错误。

blueimp图库：没有或作为第一个参数提供空列表。＆＃34;宾语 {length：0，prevObject：Object，context：HTMLDocument→54.67.25.157，选择器：＆＃34; [data-gallery =＆＃34;＆＃34;]

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

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

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

当我启用html5mode时，Blueimp画廊不在角度方面工作

2 个答案: