角度嵌套指令不在模型中显示新实体

2018-06-07 23:48:19

开发一个角度应用程序，其中包括一个功能来建立目录/嵌套树结构...

我遇到的问题是节点的渲染不像预期的那样工作。

产品只有在列表中已有产品节点时才会呈现，并且可以创建节，但试图向已添加的节添加小节不会呈现。正如预期的一样，节和产品节点正在插入模型中 - 只是指令似乎不在原始模型中不存在的节点上起作用。

相关代码：

HTML

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <h1>Menu</h1>
    <button ng-click="addSection()">Add</button>
    <admin-sections sections="menu.sections"></admin-sections>
</body>

</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.menu = {
    sections: [{
      name: "NEW SECTION 1",
      sections: [{
        name: "NEW SECTION",
        sections: [],
        products: [{
          "name": "Product",
          "price": "0.00"
        }]
      }],
      products: []
    }]
  };

  $scope.addSection = function() {
    $scope.menu.sections.push({
      name: "NEW SECTION",
      sections: [],
      products: []
    });
  };
});

app
  .directive('adminSections', function() {
    return {
      restrict: "E",
      replace: true,
      scope: {
        sections: '='
      },
      templateUrl: 'sections.html'
    };
  })
  .directive('adminSection', function($compile) {
    return {
      restrict: "E",
      replace: true,
      scope: {
        section: '='
      },
      templateUrl: 'section.html',

      link: function(scope, element, attrs, controller) {
        if (angular.isArray(scope.section.sections) && scope.section.sections.length > 0) {
          element.append($compile('<admin-sections sections="section.sections"></admin-sections>')(scope));
        }
        if (angular.isArray(scope.section.products) && scope.section.products.length > 0) {
          element.append($compile('<admin-products products="section.products"></admin-products>')(scope));
        }

        scope.addSub = function(section) {
          section.sections.push({
            "name": "NEW SECTION",
            "sections": [],
            "products": []
          });
        };

        scope.addProduct = function(section) {
          section.products.push({
            "name": "Product",
            "price": "0.00"
          });
        };

        scope.deleteSection = function(section) {
          var idx = scope.$parent.sections.indexOf(section);
          scope.$parent.sections.splice(idx, 1);
        };
      }
    };
  })
  .directive('adminProducts', function() {
    return {
      restrict: "E",
      replace: true,
      scope: {
        products: '='
      },
      templateUrl: 'products.html',
      link: function(scope, element, attrs, controller) {
        scope.editProduct = function(product) {
          if (product.price === undefined) {
            product.price = 0;
          }
          element.append($compile('<productform product="product"></productform>')(scope));
        };

        scope.deleteProduct = function(idx) {
          if (confirm('Are you sure you want to delete this product?nnClick OK to confirm.')) {
            scope.products.splice(idx, 1);
          }
        };
      }
    };
  })
  .directive('adminProduct', function($compile) {
    return {
      restrict: "E",
      replace: true,
      scope: {
        product: '='
      },
      templateUrl: 'product.html',
      link: function(scope, element, attr, controller) {

        scope.editProduct = function(product) {
          if (product.price === undefined) {
            product.price = 0;
          }
          element.append($compile('<productform product="product" />')(scope));
        };

        scope.deleteProduct = function(idx) {
          scope.$parent.deleteProduct(idx);
        };
      }
    };
  })
  .directive('productform', function($compile) {
    return {
      restrict: "E",
      replace: true,
      scope: {
        product: "="
      },
      templateUrl: 'productform.html',
      link: function(scope, element, attrs, controller) {
        scope.orig = angular.copy(scope.product);
        scope.ok = function() {
          element.remove();
          scope.$parent.editMode = false;
        };

        scope.cancel = function() {
          scope.reset();
          element.remove();
          scope.$parent.editMode = false;
        }

        scope.reset = function() {
          scope.product = angular.copy(scope.orig);
        }
      }
    };
  });

Plunker在这里：Angular Tree Menu

希望你能看到这个意图。

问题在于当链接指令时添加列表，具体取决于链接函数被调用时的节的状态（只有角度看到它时才执行一次）。

当你添加一个新的小节时，它会被链接，但是它的小节列表是空的，所以它没有，并且结果元素没有小节，因为你在调用链接函数时根据小节数组状态添加admin-sections ，所以根本不会添加任何嵌套指令。

简单地删除if语句就足够了（或者只是检查它们是否是数组）：

element.append($compile('<admin-sections sections="section.sections"></admin-sections>')(scope));

element.append($compile('<admin-products products="section.products"></admin-products>')(scope));

这样，指令中的ng-repeat将监视每个部分中的部分数组，并相应地更新列表，而当数组为空时保持为空。

工作Plunker

至于如何嵌套指令的工作，这里是一个很好的文章，当嵌套指令的链接和控制器功能被调用。

一般来说， controller在任何内部指令被解析之前运行，并且link在之后运行。所以如果你有这样的嵌套指令：

<outer-directive>
    <inner-directive></inner-directive>
</outer-directive>

该命令将如下所示：

外部指令控制器

内部指令控制器

内部指示链接

外部指示链接

这就是为什么当我试图将admin-sections指令添加到每个部分的模板时，解析器进入了一个无限循环。解析每个部分意味着调用该部分小节的另一个link ，但在外部admin-section的链接函数中使用$compile意味着它将在处理外部指令后解析。

另外，内部指令可以require （docs）父指令使用其控制器。

链接地址: http://www.djcxy.com/p/24297.html

上一篇: Angular nested directive not displaying new entities in model

下一篇: AngularJS 1.3.8 Using multiple controllers, second controller is not working