AngularJs 在 href 中使用 hash 会中断滚动并将 url 转换为 hash+fwslash+id
AngularJs with hash in href breaks scrolling and transforms url to hash+fwslash+id
如何配置 AngularJs 以滚动到 href 中指定的带有 #id 的锚元素？
问题
带有哈希值的锚 link，例如。 href="#recommanded" 变为 url#/recommanded 而不是 url#recommanded 因此它不会按预期滚动。如果未加载 angularjs 库，它可以正常工作。
在状态栏中，当我将光标移动到 link 顶部时，浏览器的状态栏会正确显示 link 我即将前往的方向，但单击后它会变形并且无法正确滚动。
我没有使用 angular 的路线。
我的 AngularJS 代码片段可能会干扰滚动/js 位置操作：
...
app.config([ '$httpProvider', '$compileProvider', function($httpProvider, $compileProvider) {
$compileProvider.debugInfoEnabled(false);
// Initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
} ]);
...
app.directive('jumpForm', function($timeout) {
return {
restrict : 'A',
link : function(scope, elem) {
// set up event handler on the form element
elem.on('submit', function() {
$timeout(function() {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.has-error');
// if we find one, set focus
if (firstInvalid) {
$('html, body').animate({
duration : 2000,
scrollTop : (firstInvalid.offsetTop + 100)
});
}
}, 200);
});
}
};
});
...
app.factory('httpResponseInterceptor', [ '$q', '$location', '$window', function($q, $location, $window) {
return {
response : function(response) {
if (response && response.data && response.data.errorCode == 'AUTHENTICATION_REQUIRED') {
var _context = $("body").attr("data-context");
var redirectUrl = _context + '/registration?msg=session_expired';
$window.location.href = redirectUrl;
return $q.reject(response);
}
return response;
}
}
} ]);
app.config([ '$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('httpResponseInterceptor');
} ]);
带有标签的电话：
<a href="#recommanded"> </a>
试验和错误
内部解决方法
anchorScroll
在线程 How to handle anchor hash linking in AngularJS 中，建议插入此片段：
app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});
并在调用它时：
<a ng-click="scrollTo('recommanded')">Foo</a>
这导致控制台上没有错误，但与以前的行为相同。 Url 转换为无滚动锚点。此外，我不喜欢最终为此使用 ng-click 功能的想法。
在我的 angularjs 中附加了：
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute)
{
if($location.hash()) $anchorScroll();
});
});
并将其命名为
<a href="#/test#recommanded">Test/Foo</a>
没有出现错误，但滚动也不起作用。
有些人暗示只需在 href 中执行 #/#recommanded。使用目标=“_self”。 None 其中对我有效。
外部解决方案
指令 scrollTo
app.directive('scrollto',
function ($anchorScroll,$location) {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
$location.hash(attrs["scrollto"]);
$anchorScroll();
});
}
};
})
html 看起来像：
<a href="" scrollTo="recommanded">link</a>
这个确实有效，但更喜欢调用 href="#recommended" 有效的解决方案。或者至少为滚动设置动画。
angular-scroll 的 du-smooth-scroll
已将 duScroll 添加到我的 angularApp.js：var app = angular.module('app', [ ..., 'duScroll' ]);
我在页面上加载了 angular-scroll.min.js 文件 angularApp.js 没有错误。
我为具有该 ID 的现有 div 调用 <a du-smooth-scroll href="#recommended-to-you">recommanded</a>。但它不会做任何事情，没有 js 错误但不会移动。
尝试添加显式缓动持续时间等设置的 duScroll 模块，没有错误但无法正常工作。
html5模式
如 angular add slash before hash in url 中所述，我尝试通过添加以下内容来打开 html5 模式：
app.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
我已经在head部分设置了base标签。
这些设置使其按预期开始工作。
... 但我要提到的是，如果我再次单击 link，地址栏中的位置更新为引用的哈希值后，它只会下降一点，而不是引用的位置。单击具有不同锚点的 links 效果很好。不确定这是一个普遍的错误还是只是我的一些设置适得其反。
如何配置 AngularJs 以滚动到 href 中指定的带有 #id 的锚元素？
问题
带有哈希值的锚 link，例如。 href="#recommanded" 变为 url#/recommanded 而不是 url#recommanded 因此它不会按预期滚动。如果未加载 angularjs 库，它可以正常工作。 在状态栏中，当我将光标移动到 link 顶部时，浏览器的状态栏会正确显示 link 我即将前往的方向，但单击后它会变形并且无法正确滚动。 我没有使用 angular 的路线。
我的 AngularJS 代码片段可能会干扰滚动/js 位置操作：
...
app.config([ '$httpProvider', '$compileProvider', function($httpProvider, $compileProvider) {
$compileProvider.debugInfoEnabled(false);
// Initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
} ]);
...
app.directive('jumpForm', function($timeout) {
return {
restrict : 'A',
link : function(scope, elem) {
// set up event handler on the form element
elem.on('submit', function() {
$timeout(function() {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.has-error');
// if we find one, set focus
if (firstInvalid) {
$('html, body').animate({
duration : 2000,
scrollTop : (firstInvalid.offsetTop + 100)
});
}
}, 200);
});
}
};
});
...
app.factory('httpResponseInterceptor', [ '$q', '$location', '$window', function($q, $location, $window) {
return {
response : function(response) {
if (response && response.data && response.data.errorCode == 'AUTHENTICATION_REQUIRED') {
var _context = $("body").attr("data-context");
var redirectUrl = _context + '/registration?msg=session_expired';
$window.location.href = redirectUrl;
return $q.reject(response);
}
return response;
}
}
} ]);
app.config([ '$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('httpResponseInterceptor');
} ]);
带有标签的电话：
<a href="#recommanded"> </a>
试验和错误
内部解决方法
anchorScroll
在线程 How to handle anchor hash linking in AngularJS 中，建议插入此片段：
app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});
并在调用它时：
<a ng-click="scrollTo('recommanded')">Foo</a>
这导致控制台上没有错误，但与以前的行为相同。 Url 转换为无滚动锚点。此外，我不喜欢最终为此使用 ng-click 功能的想法。
在我的 angularjs 中附加了：
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute)
{
if($location.hash()) $anchorScroll();
});
});
并将其命名为
<a href="#/test#recommanded">Test/Foo</a>
没有出现错误，但滚动也不起作用。
有些人暗示只需在 href 中执行 #/#recommanded。使用目标=“_self”。 None 其中对我有效。
外部解决方案
指令 scrollTo
app.directive('scrollto',
function ($anchorScroll,$location) {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
$location.hash(attrs["scrollto"]);
$anchorScroll();
});
}
};
})
html 看起来像：
<a href="" scrollTo="recommanded">link</a>
这个确实有效，但更喜欢调用 href="#recommended" 有效的解决方案。或者至少为滚动设置动画。
angular-scroll 的 du-smooth-scroll
已将 duScroll 添加到我的 angularApp.js：var app = angular.module('app', [ ..., 'duScroll' ]);
我在页面上加载了 angular-scroll.min.js 文件 angularApp.js 没有错误。
我为具有该 ID 的现有 div 调用 <a du-smooth-scroll href="#recommended-to-you">recommanded</a>。但它不会做任何事情，没有 js 错误但不会移动。
尝试添加显式缓动持续时间等设置的 duScroll 模块，没有错误但无法正常工作。
html5模式
如 angular add slash before hash in url 中所述，我尝试通过添加以下内容来打开 html5 模式：
app.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
我已经在head部分设置了base标签。
这些设置使其按预期开始工作。
... 但我要提到的是，如果我再次单击 link，地址栏中的位置更新为引用的哈希值后，它只会下降一点，而不是引用的位置。单击具有不同锚点的 links 效果很好。不确定这是一个普遍的错误还是只是我的一些设置适得其反。