0

我有一个 d3 词云，当单击其中一个云词时会启动一个警报框。我不想启动警报框，而是在相应的 div 元素中突出显示单击单词的任何匹配实例el。

处理程序位于 AngularJs 指令中，因此我在立即关闭中拥有元素的上下文。

.on("click",function(v,i,l){
    console.log(
        el // [div.content ng-scope, ...
        v  // Object {text: "demo", ...
    );
    alert(v.text) // demo
})

我之前在构建搜索框时做过这个，但我丢失了代码并且完全忘记了我是如何做到的。

4

1 回答 1

1

或者，如果你想使用 AngularJS，你可以使用过滤器和绑定：

Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <a ng-click="$parent.selectedWord = word">{{word}}</a>
        </div>
    </div>
Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <span ng-bind-html-unsafe ="word | highlightWord : selectedWord"></span>
        </div>
    </div>
Selected Word: {{selectedWord}}

和：

app.controller('MainCtrl', function($scope) {
    $scope.words = [
        "beer",
        "wine",
        "whiskey",
        "vodka",
        "gin",
        "rum"
    ];

    $scope.selectedWord = '';

});

app.filter('highlightWord', function() {
    return function(word, selectedWord) {
        if(word === selectedWord) {
            return '<strong>' + word + '</strong>';
        } else {
            return word
        }
    };
});

http://plnkr.co/edit/v4ueqx?p=preview

请注意使用 ng-bind-html-unsafe 以返回未从过滤器中转义的 html。您也可以使用指令来完成此操作。

编辑：

如果你想在文本块中突出显示一个单词，方法非常相似：

Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <a ng-click="$parent.selectedWord = word">{{word}}</a>
        </div>
    </div>
Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;" ng-bind-html-unsafe ="text | highlightWord : selectedWord"></div>
Selected Word: {{selectedWord}}

和：

app.controller('MainCtrl', function($scope) {
    $scope.words = [
        "beer",
        "wine",
        "whiskey",
        "vodka",
        "gin",
        "rum"
    ];

    $scope.selectedWord = '';

    $scope.text = "blah blah beer blah blah blah wine blah blah blah whiskey blah blah blah vodka blah blah blah blah blah gin blah blah blah blah blah rum blah blah blah blah beer blah blah blah blah vodka blah blah blah vodka blah blah blah blah blah blah vodka blah blah blah blah";

});

app.filter('highlightWord', function() {
    return function(text, selectedWord) {
        if(selectedWord) {
            var pattern = new RegExp(selectedWord, "g");
            return text.replace(pattern, '<span class="highlighted">' + selectedWord + '</span>');
        } else {
            return text
        }
    };
});

http://plnkr.co/edit/wtxZme?p=preview

于 2013-08-14T20:01:35.567 回答