香草JS到角度指令;创建使用角度指令的 DOM 元素

vanilla JS to angular directive; creating DOM elements which use angular directives

本文关键字：指令 元素 DOM JS 香草 创建      更新时间：2023-09-26

我创建了以下代码：

var node = document.getElementById('TreeList');
var keys = Object.keys(model[0]);
var trackingObject = {};
for (var i = 0; i < keys.length; i++) {
    trackingObject[keys[i]] = "";
}
for (var i = 0; i < model.length; i++) {
    for (var j = 0; j < keys.length; j++) {
        var current = keys[j];
        if (trackingObject[current] !== model[i][current]) {
            trackingObject[current] = model[i][current];
            for (var k = j+1; k < keys.length; k++) {
                trackingObject[keys[k]] = "";
            }
            var newNode = document.createElement('li');
            newNode.setAttribute("style", "padding-left: calc(10px + " + j * 20 + "px);");
            newNode.setAttribute("ng-click", "alertTest()"); //functionality test
            newNode.appendChild(document.createTextNode(model[i][current]));
            node.appendChild(newNode);
        }
    }
};

它采用对象数组model并根据特定条件创建新的<li>元素。代码按预期工作，但是我很难理解如何将其放入指令中。就像代码一样，指令应该只需要对象数组输入，然后呈现完整的<ul>。

一些<li>元素将包含角度指令，例如 ng-click 或 ng-show ，但是这些目前不起作用，我相信这与不使用$compile

我了解创建具有静态template或templateUrl属性的指令，但我不明白如何在指令中使用创建 DOM 元素的代码。

作为参考，数组中的示例对象可能如下所示：{ACV: "A", ACVGroup: "Reliant", FM: 1, FY: 2008} ，注意：属性的数量不是静态的。

这个想法是基于.. angular-toArrayFilter

您应该创建一个filter来过滤掉array并获取过滤后的array。

app.filter('modelFilter', function () {
  return function (obj) {
      //obj is the repeat model here.
      //you just do the modification here
      var newObj = obj.anything() //do anything with the object
      return newObj;
  };
});

在您的标记中

<whatever ng-repeat="item in model | modelFilter "></whatever>

希望这有帮助..

解决方案是将此代码包含在指令的链接函数中，并包含我需要添加新节点$compile，其中包括更多指令。我试图通过首先过滤对象数组来解决问题，然后将其传递给不需要操作 DOM 的指令，但我没有成功实现预期的结果。

相关文章：