用角度突出显示单词

我想让用户点击特定div中的单词，该单词将被突出显示。我很新，知道，我所做的并不接近工作，但我看了很多视频并阅读了很多文章，并被卡住了。即使我没有确切的答案，下一步的任何方向都会非常有帮助。用角度突出显示单词

我想我需要一个指令，将采取div，分割文本，并添加一个跨度每个单词。这个div需要一个突出显示单词的点击事件。我经历了很多次迭代，并且在每个点都被阻塞。

我有很多其他的角度内置指令工作在页面上，所以我知道我有一般的应用程序设置正确，我在应用程序模块中包含指令。

<div my-prepare-text ng-bind-html="item.text | unsafe"></div> 

angular.module('MyDirectives', []) 
    .directive('myPrepareText', function() { 
return { 
    restrict: 'A', 
    link: function(scope, element) { 
    var words = element.text().split(' '); 
    var text = words.join("</span> <span my-highlight ng-click='highlight()'>"); 
    element.html("<p><span my-highlight ng-click='highlight()'>" + text + "</span></p>"); 
    }; 
}; 
    })

来源

2015-09-21 RedMeeple

非常难以做到这一点，而不使用'Selection' API https://developer.mozilla.org/en-US/docs/Web/API/Selection和delgated事件。找到一个脚本，已经做到了这一点...没有意义重新发明轮子 – charlietfl

你试过把它关掉又打开了吗？ – siride

您可以创建一个指令，将单词作为属性获取，然后使用ng-repeat创建跨度。

我做了一个basic example来显示这种行为。

angular.module('MyDirectives', []) 
 
    .directive('myPrepareText', function() { 
 
    return { 
 
     restrict: 'A', 
 
     template: '<div><span ng-repeat="word in words" class="single-word" ng-click="highlight($event)">{{word}}</span></div>', 
 
     link: function($scope, $element) { 
 
     $scope.words = $element.attr('words').split(' '); 
 
     $scope.highlight = function(event) { 
 
      angular.element(event.target).toggleClass('highlight'); 
 
     }; 
 
     } 
 
    }; 
 
    });

.highlight { 
 
    background-color: yellow; 
 
} 
 
.single-word::after { 
 
    content: ' '; 
 
    background-color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body ng-app="MyDirectives"> 
 
    <div words="so many words to highlight" my-prepare-text></div> 
 
</body> 
 

 
</html>

来源

2015-09-22 09:18:42 Meir

我认为你的做法，因为的角度将不会编译您通过element.html(...)在指令插入什么为html失败。

这里有2个解决方案：

使用该指令的模板，而不是插入HTML字符串。在模板中，使用ng-repeat遍历您在链接函数中分割的数组，并让ng-repeat生成您的<span>。使用$compile服务。我找到了一个简单的例子，说明如何使用$compilehere。

记住角总是要经过2个阶段编译和链接使它的“指令神奇”发生。它不知道你已经通过element.html(...)插入了一个新的指令，它必须以某种方式进行处理，除非你这么说。这是好，因为否则消化过程将会非常慢，因为角将不得不递归地检查每个摘要循环中每个DOM元素会发生什么。

我希望这能让你更接近地了解角度在底层做什么。

来源

2015-09-21 17:56:00

用角度突出显示单词

回答

相关问题