Question

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

我想我需要一个指令来接受div，划分文本并在每个单词周围添加一个跨度。此div需要一个突出显示该单词的单击事件。我经历了很多次迭代，而且每次都被阻挡了。

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

<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>");
  };
};
  })

Answer 1

您可以创建一个指令，将单词作为属性获取，然后使用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>

Answer 2

我认为您的方法失败是因为 angular不会通过 element.html(...)编译您在指令中作为html插入的内容。

这是两个解决方案：

在指令中使用模板，而不是插入html字符串。在模板中，使用ng-repeat迭代您在链接功能中拆分的数组，并让ng-repeat生成您的<span>。
使用$compile服务。我找到了一个简单的示例，说明如何使用$compile here。

请记住，角度总是必须通过2个阶段编译和链接才能使其成为“指令魔法”。它不会知道你已经通过element.html(...)插入了一个必须以某种方式处理的新指令，除非你这么说。这是好，因为否则摘要过程将无法忍受缓慢，因为角度必须递归检查每个摘要周期中每个DOM元素发生的情况。

我希望这能让你更加了解角度在幕后做什么。

用角度突出显示单词

2 个答案: