Question

AngularJS noob。

我希望我的应用程序能够响应url哈希。通过回应，我的意思是简单的设置变量值。

在此示例中，如果网址为 http：example.com/#parents-to-be ，我希望应用执行滚动的标准行为 ＃parents-to-be ，还设置 $ scope.tab3 = 1;

通过一些研究，似乎可以通过 $ location.hash（） 和 $ anchorScroll（）的组合来实现 即可。但是，到目前为止我还没有成功。有人可以帮忙吗？

HTML：

<div ng-app="bug">
    <div ng-controller="TabsController">
        <a href ng-click="activateTab(1)">tab 1</a>
        <a href ng-click="activateTab(2)">tab 2</a>
        <a href ng-click="activateTab(3)">tab 3</a>

        <div id="parents-to-be"> <!-- this is the target div -->
            <div ng-show="tab1 === 1">content of tab 1</div>
            <div ng-show="tab2 === 1">content of tab 2</div>
            <div ng-show="tab3 === 1">content of tab 3</div>
        </div>

    </div> <!-- /angular tabs controller scope -->    
</div> <!-- /angular app scope -->

app.js：

(function() {
        var app = angular.module('bug', []);
        app.controller('TabsController', function($scope, $location, $anchorScroll) {
            // init tabs
            $scope.initTabs = function() {
                $scope.tab1 = 0;
                $scope.tab2 = 0;
                $scope.tab3 = 0;
            };
            // activate tabs
            $scope.activateTab = function(tab_index) {
                $scope.initTabs();
                $scope['tab' + tab_index] = 1;
            };
            // this is the part of the app where I try to get the hash value and edit the value of tab3
            $scope.hash_value = $location.hash();
            if ($scope.hash_value === "parents-to-be") {
                $scope.activateTab(3);
                $anchorScroll();
            }
        });
    })();

谢谢！

Answer 1

使用$on事件处理程序捕获$locationChangeSuccess事件后的哈希值：

$rootScope.$on('$locationChangeSuccess', function()
 {
 console.log(arguments[1].replace(/[^#]+(#.+)/, "$1") );
 }
)

angular.element(document).injector().get('$rootScope').$on('$locationChangeSuccess', function(){console.log(arguments[1].replace(/[^#]+(#.+)/, "$1"))})

<强>参考

AngularJS：如何获取URL中的哈希值

1 个答案: