AngularJS：如何创建 DOM 并绑定到基于任意分层数据的模型答案

【问题标题】：AngularJS : how to create DOM and bind to a model based on arbitrary hierarchical dataAngularJS：如何创建 DOM 并绑定到基于任意分层数据的模型
【发布时间】：2015-03-19 11:16:28
【问题描述】：

Angularjs：ng-repeat 中的复杂指令，如何绑定 ngModel 或 ngChecked in 指令并使其工作？给定数组：

+----+-----------+----------+----------+-------+
| id |   name    | parentid | haschild | value |
+----+-----------+----------+----------+-------+
|  1 | parent    | null     | false    | true  |
|  2 | id1 child | 1        | true     | true  |
|  3 | id2 child | 2        | true     | true  |
|  4 | id3 child | 3        | false    | true  |
|  5 | id1 child | 1        | true     | true  |
|  6 | id5 child | 5        | false    | true  |
+----+-----------+----------+----------+-------+
$scope.permission = [
   {"id":1,"name":"parent","value":true,"parentid":"","haschild":false}, 
   {"id":2,"name":"id-1 child","value":true,"parentid":1,"haschild":true},
   {"id":3,"name":"id-2 child","value":true,"parentid":2,"haschild":true},
   {"id":4,"name":"id-3 child","value":true,"parentid":3,"haschild":false},
   {"id":5,"name":"id-1 child","value":true,"parentid":1,"haschild":true},
   {"id":6,"name":"id-5 child","value":true,"parentid":5,"haschild":false}
];

所以在html中

<div ng-repeat="x in permission" ng-if="x.parentid == undefined"  has-child="{{x}}"></div>

和指令

myApp.directive('hasChild', function($compile) {
    return function(scope, element, attrs) {
        var j = JSON.parse(attrs.hasChild);
        function generatePermissionDom(thisElement,thisParent)
        {
            angular.forEach(scope.permission,function(o,i){
                if(thisParent.id==o.parentid) 
                {
                    var e = $('<div><input type="checkbox" ng-model="o.value"/>'+o.name+'</div>');
                    generatePermissionDom(e,o);
                    $(thisElement).append(e);
                }
            });
        }

        if(j.haschild)
            angular.forEach(scope.permission,function(o,i){
                if(o.parentid==j.id) 
                {   
                    var e = $('<div><input type="checkbox" ng-model="o.value"/>'+o.name+'</div>');
                    if(o.haschild)
                        generatePermissionDom(e,o);
                    $(element).append(e);
                }
            });

        var p = $(element);
        $compile(element.contents())(scope);
    }
});

那么如何在指令中绑定模型值呢？这是笨蛋 http://plnkr.co/edit/QYqfEVaQF8WmUvB1aHB6?p=preview

附加信息：

haschild 表示父元素有子元素

例如：

1.人A拥有多家公司，所以人A有孩子

2.那么其中一家公司有多名员工，那么该公司有孩子。所以在我的指令中，如果这个元素（假设这是元素 A）有子元素，则生成子元素并输入并绑定到 ngModel。

我的回答：这是我的想法和简单的实现方式 http://plnkr.co/edit/olKb5oBoxv0utlNcBQPg?p=preview

var app = angular.module('plunk', []);
app.directive('generatePermissions', function($compile) {
  return {
    restrict : "E",
    scope : true,
    require : 'ngModel',
    link:function(scope,element,attrs,ngModel)
    {
      function generatePermissionDom(parent,parentElement)
      {

          angular.forEach(scope.list,function(o,i){
              if(parent.id==o.parentid) 
              {
                  var e = angular.element('<div style="border:1px solid red"><input type="checkbox" ng-model="list['+i+'].value"/></div>');
                  if(o.haschild)
                    generatePermissionDom(o,e);
                  parentElement.append(e);
              }
          });
      }
      angular.forEach(scope.list,function(o,i){

        if(o.parentid == null)
        {
          var e = angular.element('<div style="border:1px solid red"><input type="checkbox" ng-model="list['+i+'].value"/></div>');
          if(o.haschild)
            generatePermissionDom(o,e);
          element.append(e);
        }
      });
      var p = $(element);
      $compile(p.contents())(scope);
    }
  }
});


app.controller('MainCtrl', function($scope) {

  $scope.list = [{"id":1,"name":"parent","value":true,"parentid":null,"haschild":true},{"id":2,"name":"id-1 child","value":false,"parentid":1,"haschild":true},{"id":3,"name":"id-2 child","value":false,"parentid":2,"haschild":true},{"id":4,"name":"id-3 child","value":false,"parentid":3,"haschild":false},{"id":5,"name":"id-1 child","value":false,"parentid":1,"haschild":true},{"id":6,"name":"id-5 child","value":false,"parentid":5,"haschild":false}];
  $scope.checkValue = function()
  {
    angular.forEach($scope.list,function(o,i){
      console.log("id:"+o.id+"  name:"+o.name+"  value:"+o.value);
    });
  }
});

html

  <body ng-controller="MainCtrl">
    <generate-permissions ng-model="list"></generate-permissions>
    <button ng-click="checkValue()">check</button>
  </body>

不过，我认为 @NewDev 的答案 是正确答案！

【问题讨论】：

你能用文字解释一下你的hasChild指令试图做什么吗？
我还是不太明白。您似乎想根据对象的层次结构生成复选框的 DOM 树？我接近了吗？我不明白为什么你有ng-repeat
@NewDev 是的，你说得对。对于 ng-repeat，你可以忽略它，它可以在指令中设置。只是我只拿出来。

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

基本上，您正在寻找的是创建一个任意分层的 DOM 结构并将其绑定到某个相等的分层数据结构（或 ViewModel）。

您如何代表您的等级制度 - 我将由您决定。这不是问题的必要条件。

为简单起见，假设我们将层次结构建模为树结构：

$scope.tree = {n: "root", v: false, 
      c: [
        {n: "L11", v: false, c: []},
        {n: "L12", v: false, c: [
          {n: "L21", v: true, c: [
            {n: "L31", v: false, c:[]}
            ]}
          ]}
        ]};

然后您需要遍历这棵树并创建绑定到某个对象 o 的 DOM 元素（请耐心等待）：

<div><input ng-model="o.v">{{o.n}}</div>

然后，这需要针对范围进行编译。但由于结构是任意的，您可以为每个节点创建一个新的子范围。

那么，o 是什么？ o 将是我们将在为树的每个节点创建的每个子作用域上创建的对象。

因此，假设您有一个递归函数traverseTree，它 1) 创建 DOM 元素，2) 针对此范围进行编译，以及 3) 为每个子范围创建一个子范围。它可能如下所示：

function traverseTree(n, scope, parent){
  var me = angular.element("<div><input type='checkbox' ng-model='o.v'>{{o.n}}</div>");
  $compile(me)(scope);
  parent.append(me);

  for (var i = 0; i < n.c.length; i++) {
    var c = n.c[i];
    var childScope = scope.$new(true);
    childScope.o = c; // set object "o" on the scope

    traverseTree(c, childScope, me);
  }
}

指令的链接函数开始遍历树：

app.directive("tree", function($compile){

  function traverseTree(n, scope, parent){
     // as above
  }

  return {
    restrict: "A",
    scope: {
      root: "=tree"
    },
    link: function(scope, element, attrs){
      var childScope = scope.$new(true);
      childScope.o = scope.root;

      traverseTree(scope.root, childScope, element);
    }
  };

});

用法是：

<div tree="tree"></div>

这是plunker

【讨论】：

感谢@NewDev！我看到你 plunker，这就是我想要的，我需要一些时间来消化你的解决方案。我也提出了我自己的解决方案。但是，我认为您的答案是正确的做法。如果你认为我的问题标题应该重新定义，你只需修改它，因为我不知道如何定义它:)
很好的答案！我现在完全明白了！

【解决方案2】：

很抱歉我刚刚看到，所以这是我的 2 便士，供大家使用。

假设

$scope.tree = {n: "root", v: false, 
  c: [
    {n: "L11", v: false, c: []},
    {n: "L12", v: false, c: [
      {n: "L21", v: true, c: [
        {n: "L31", v: false, c:[]}
        ]}
      ]}
    ]};

我们可以的

<script type="text/ng-template" id="Tree">
    <input type='checkbox' ng-model='o.v'>{{o.n}}
    <p ng-if="o.c">
        <p ng-repeat="o in o.c" ng-include="'Tree'"></p>
    </p>
</script>
<div>
    <p ng-repeat="o in tree" ng-include="'Tree'"></p>
</div>

抱歉没有测试这个 sn-p 没有时间，但这是它可以在没有编码层次结构的情况下工作的方式。用过很多次了。

【讨论】：