Question

我在AngularJS网络项目中。

我想在点击锚链接时突出显示div。结构如下：

<div interaction-list-item="" sfinx-interaction="interaction" class="ng-isolate-scope">
...
<a name="iid_7923"></a>
...
</div>

锚点链接会在点击时将location.hash设置为相似内容，因此网址可能如下所示：http://localhost:9000/#/home#iid_7923。此iid_是动态的，在_

之后具有不同的ID

我已经尝试了几种jQuery解决方案，最终会出现非常丑陋和冗长的代码：

$(".indicator.active.line-D").click(function () {
    // more similar code..
    if ($("div:contains('D4')") && $("a:contains('D4')")) {
        $(".col-md-6.interactionscol:contains('D4')").css("border", "3px solid #428bca");
        setTimeout(function () {
            $(".col-md-6.interactionscol:contains('D4')").css("border", "");
        }, 1000);
    }
    // more similar code..
});

这个片段的目的是在点击锚点lnik时，检查div和锚点是否相互匹配，然后将CSS应用到它上面，1秒钟后删除它。

我怎样才能更聪明地做到这一点 - 如果location.hash包含例如#iid_7923而div包含a tag哪个名称相同，则突出显示它！

我无法弄明白。提前谢谢。

更新：我希望达到类似的目的：target selector

但我的锚的代码与经典方式不相似......它看起来像这样：

$scope.scrollToInteraction = function (iid) {
   $location.hash(iid);
   $anchorScroll();
};

Answer 1

使用angular，使用n在控制器或整个应用程序中公开您的哈希：

$rootScope

然后在你的html中使用一个指令来设置div的样式：

angular.module('foo').run(['$location', '$rootScope', function($location, $rootScope) {

    $rootScope.currentHash = function() {
        return $location.hash();
    };

}]);

请注意您的currentHash（）中缺少<div data-ng-class="{'active': currentHash() == 'iid_7923'}">。

Answer 2

您可以使用onhashchange事件将类添加到父元素。

var lastParent = null;
window.addEventListener('hashchange', function() {
    // Remove class from previous target parent
    if(lastParent)
    {
        lastParent.className = (' '+lastParent.className+' ').replace(' hastarget ',' ');
        lastParent = null;
    }
    // Remove the '#' from the location hash
    var targetId = document.location.hash.substr(1);
    var target = document.getElementById(targetId);
    // Try to support the name attribute
    if(!target)
    {
        var nameTargets = document.getElementsByName(targetId);
        // If nothing found, don't do anything
        if(nameTargets.length == 0) return;
        target = nameTargets[0];
    }
    // If the element does not have any parent, add the class to the <html> tag
    lastParent = target.parentElement || document.documentElement;
    lastParent.className += ' hastarget';
}, false);

如果子元素名称与location.hash

2 个答案:

JSFiddle demo