用类似jQuery的插件扩展AngularJS

Extending AngularJS with jQuery like plugin

本文关键字：插件 扩展 AngularJS jQuery      更新时间：2023-09-26

我正在创建一个AngularJS指令，它将绑定到包含'htm'字符串的控制器范围上的属性。该字符串是从后端数据库中提取的。我希望将html附加到包含指令属性的元素。之后，我想深入到新创建的元素中，并用一个span包围每个"单词"。我使用类似于jQuery高亮插件的jQuery扩展函数实现了后者。实际上，我的代码是对这个插件的原始代码的修改:

jQuery.extend({
highlight: function (node, re) {
    if (node.nodeType === 3) {
        var match = node.data.match(re);
        if (match) {
            var highlight = document.createElement('span');               
            highlight.className = 'highlight';
            var wordNode = node.splitText(match.index);
            wordNode.splitText(match[0].length);
            var wordClone = wordNode.cloneNode(true);
            highlight.appendChild(wordClone);             
            wordNode.parentNode.replaceChild(highlight, wordNode);
            return 1; //skip added node in parent
        }
    } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
            !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
            !(node.tagName === 'SPAN' && node.hasAttribute('ng-class'))) { // skip if already highlighted
        for (var i = 0; i < node.childNodes.length; i++) {
            i += jQuery.highlight(node.childNodes[i], re);
        }
    }
    return 0;
}
});
jQuery.fn.highlight = function (times) {
  var pattern = "''b([^ ]+)''b";
  var re = new RegExp(pattern);
  return this.each(function () {
    jQuery.highlight(this, re);
 });
};

我的指令代码:

.directive('spanner', function($compile){
var linkFn = function(scope, element)
{
   element.append(scope.spanner);
   element.highlight();
   $compile(element.contents())(scope);
};
return {
    scope: {
        spanner: '='
    },
    restrict: 'A',
    link: linkFn
  };  
});

这工作得很好，但我使用jQuery。我更愿意扩展AngularJs附带的jQlite(或者以一种根本不需要扩展的方式来做!)我尝试扩展jQlite，但每次都失败了。有人能建议一种方法，我可以做到这一点，而不依赖于jQuery?我认为这会大大提高我对AngularJs的理解。

由于90%的插件是本地脚本，它是一个相当简单的端口到一个指令没有库(jQuery或jQlite)依赖:

app.directive('highlight', function() {
  /* define highligher variables and function */
  var pattern = "''b([^ ]+)''b";
  var re = new RegExp(pattern);
  var highlighter = function(node, re) {
    if (node.nodeType === 3) {
      var match = node.data.match(re);
      if (match) {
        var highlight = document.createElement('span');
        highlight.className = 'highlight';
        var wordNode = node.splitText(match.index);
        wordNode.splitText(match[0].length);
        var wordClone = wordNode.cloneNode(true);
        highlight.appendChild(wordClone);
        wordNode.parentNode.replaceChild(highlight, wordNode);
        return 1; //skip added node in parent
      }
    } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
      !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
      !(node.tagName === 'SPAN' && node.hasAttribute('ng-class'))) { // skip if already highlighted
      for (var i = 0; i < node.childNodes.length; i++) {
        i += highlighter(node.childNodes[i], re);
      }
    }
    return 0;
  }
   /* return directive link function */    
   return function(scope, elem) {
      /* initalize on element */
      highlighter(elem[0], re);
    }    
});
HTML 

 <p highlight>Far far away</p>
演示

相关文章：