使用 angular-scroll 和 ng-route 实现到页面的外部链接答案

【问题标题】：implementing external links to a page with angular-scroll and ng-route使用 angular-scroll 和 ng-route 实现到页面的外部链接
【发布时间】：2015-05-15 16:54:29
【问题描述】：

所以这是一个 angularjs 应用程序。

我已经实现了这个 angular-scroll api:https://github.com/oblador/angular-scroll，以显示产品目录，其中内容是从 db 加载的。此目录包含所有子类别（及其产品），每个子类别都有一个锚点，标识为：anchor+categoryId。

所以从菜单中，我单击一个类别，它很好地滚动到正确的部分。

当我需要从网站的其他页面创建一些链接以转到目录中的特定部分类别时，就会出现问题。因为我有 ng-route，所以我需要创建一个新的 url 来重定向到目录，并在加载内容时捕获以滚动到所需的类别。

但是我有一个与目录路径关联的指令，它根据客户端的域查找部分，所以为了显示正确的模板我必须使用 $http ，获取内容并将其替换为我的指令。

因为我不知道如何知道指令的内容何时准备好调用滚动条......最好在此处显示一些代码：

这是接收呼叫的路由

    $routeProvider.
    when('/products/category/:categoryId/page/:page/anchor/:anchorId?', {
        template:'<product-display-view></product-display-view>',
        controller: 'ProductListCtrl',
        access: {
            authorizedRoles: [USER_ROLES.all]
        },
        resolve: {
            wait : 'waitForIt',
            prefetchDataProducts: ['waitForIt','$route','SearchService',
                function(waitForIt,$route,SearchService) {
                    return waitForIt.then(function() {

                        return SearchService.getProducts($route.current.params.categoryId,$route.current.params.page);

                    });
                }],
            prefetchDataCategories:['waitForIt','CategoryService',
                function(waitForIt,CategoryService) {

                    return waitForIt.then(function() {

                        return CategoryService.getCategories();


                    });
                }]
        }
    }).

这是指令产品展示

productDirectives.directive('productDisplayView',['$rootScope','$compile','$http','$templateCache'  ,'$document',
    function($rootScope,$compile, $http, $templateCache,$document){

        return {

            restrict: 'E',
            link: function (scope, element, attrs) {

                var templateUrl = 'users/catwizardAngularCore/app/partials/themes/' + scope.app.theme.themeName + '/partials/product-display.html';

                $http.get(templateUrl, {cache: $templateCache})
                    .success(function (templateContent) {


                        element.replaceWith($compile(templateContent)(scope));


                    });

                /* this doesn't work because the someElement doesn't exist*/
                var newHash = 'anchor' + scope.anchorId;
                var someElement = angular.element(document.getElementById(newHash));
                angular.element(someElement).ready(function () {



                    $document.scrollToElement(someElement, 200, 2000);




                });


            }

        }]);

【问题讨论】：

这看起来像 stackoverflow.com/q/30245910/584846 的副本
@BrentWashburne 谢谢！超时成功了！

标签： angularjs

【解决方案1】：

有一个正确答案的重复问题，但尚未被接受，所以我在此处复制答案。

$anchorScroll 必须在页面渲染后发生，否则锚不存在。这可以使用 $timeout()。

$timeout(function() {
  $anchorScroll('myAnchor');
});

感谢Tony

【讨论】：