Question

这是我的第一个Angular Directive。

我正在尝试根据用于查找该内容的搜索字词对html内容进行简单的突出显示。

问题是，这是第一个任期，但不是更多。我想要突出显示所有单词，但是当我替换HTML内容时，我做错了。

这是指令试图做的事情：

1。该指令应突出显示一个或多个单词。例如。如果搜索字词是“文档合法”，则应突出显示它们，即使它们不在此订单中。

因此，像“合法的文件”这样的文本应该突出显示，“合法”和“文档”。

2。如果单词少于3个字符则不会突出显示。

3。如果找不到该单词，请尝试从中删除最后一个字符，直到其长度小于3.您可以搜索“维度”，搜索引擎可能会返回包含“维度”甚至“角钱”的文本。

以防万一，该应用程序是一个离子应用程序。

这是我的代码。

角度指令：

BLOBs

你可以看到一些奇怪的东西。就像使用$ scope.highlightTerm而不是将highlightTerm var传递给指令一样。我无法让它发挥作用。

如何正确更改元素的HTML？

这是使用指令的模板：

angular.module('starter.directives', [])

.directive('highlightSearchTerms', function($compile) {
  return {
    restrict: 'A',
    scope: true,
    link: function($scope, element, attrs) {
      $scope.highlightTerm = function(term) {
        var html = element.html();

        var highlighted = html.replace(new RegExp(term, 'gi'),
          '<span class="highlightedText">$&</span>');

        if (highlighted == null) {
          return false;
        }

        // @see
        // I think that the problem is here, it works the 
        // first time, but the second time it gets here
        // the following exception is throwed
        // "Cannot read property 'replaceChild' of null"
        element.replaceWith(highlighted);

        return html != highlighted;
      };

      var searchTerms = $scope.searchTerms;

      if (searchTerms != undefined && searchTerms.length < 3) {
        return;
      }

      var terms = searchTerms.split(' ');

      // Try to highlight each term unless the word
      // is less than 3 characters
      for (var i = 0; i < terms.length; i++) {
        var term = terms[i];

        // // Try to highlight unless the word is less than 3 chars
        while (term.length > 2) {
          // If it got highlighted skip to next term
          // else remove a character from the term and try again
          if ($scope.highlightTerm(term)) {
            break;
          }

          term = term.substring(0, term.length - 1);
        }
      }
    }
  };
});

我希望做类似的事情，但我无法让它发挥作用：

<div ng-include src="tplName" highlight-search-terms></div>

这是一个Plunker： http://plnkr.co/edit/BUDzFaTnxTdKqK5JfH0U?p=preview

Answer 1

这应该适用于你，使用'compile'函数：

angular.module('starter.directives', [])

.directive('highlightSearchTerms', function($compile) {
  return {
    restrict: 'A',
    scope: true,
    compile: function(elem, attrs) {
        // your code
        elem[0].innerHTML = '<span class="highlightedText">$&</span>';
        // your code
    }
  };
});

Documentation也可以提供帮助。

Answer 2

即使是强硬的朋克解决方案也可行，但我认为你不应该为单个＆＃34;线＆＃34;触发多次重新编译。我建议将html存储在一个变量中，并在每个术语被替换后重新编译。

这是一个工作示例 - 但它需要一些抛光。

http://plnkr.co/edit/3zA54A0F2gmVhCComXAb?p=preview

Parent

Answer 3

我认为您的代码正常运行，但问题是您正在尝试替换使用该指令的整个div。因此，您只需将element.replaceWith(highlighted);替换为element.html(highlighted);即可。

我希望做类似的事情，但我无法让它发挥作用：<div ng-include src="tplName" highlight-search-terms="something to highlight"></div>

你已经在那里，只需在链接功能中使用attrs，如下所示：

var terms = attrs.highlightSearchTerms;，您将获得highlight-search-terms="something to highlight"

中传递的内容

在指令的链接中替换angular元素html

3 个答案: