javascript - 普通 JS 到 Angular 指令；创建使用 Angular Directive(指令)的 DOM 元素

Question

我创建了以下代码:

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>元素将包含 Angular Directive(指令)，例如 ng-click或ng-show ，但是这些目前不起作用，我相信这与不使用 $compile 有关。

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

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

Answer 1

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

您应该创建一个过滤器来过滤掉数组并获取过滤后的数组。

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>

希望这有帮助..