javascript - 替换指令链接中的 Angular 元素 html

Question

这是我的第一个 Angular 指令。

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

问题是，这对第一个学期有效，但对更多学期无效。我希望所有单词都突出显示，但在替换 HTML 内容时我做错了什么。

这就是指令试图做的:

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

因此，像“legal something document”这样的文本应该同时突出显示“legal”和“document”。

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

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

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

这是我的代码。

Angular Directive(指令):

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

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

如何正确更改元素的 HTML？

这是使用指令的模板:

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

我想做类似的事情，但我无法让它工作:

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

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

Answer 1

我认为您的代码可以正常工作，但问题是您正在尝试替换整个 div那就是使用指令。所以你能做的就是替换 element.replaceWith(highlighted);与 element.html(highlighted);它将起作用。

I wish to do something like that but I couldn't get it working: <div
ng-include src="tplName" highlight-search-terms="something to
highlight"></div>

你已经在那里了，只需使用 attrs在链接函数中像这样:

var terms = attrs.highlightSearchTerms; , 你会得到你在 highlight-search-terms="something to highlight" 中传递的内容