分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – Angular嵌套指令不在模型中显示新实体，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@ 开发一个角度应用程序,其中包含一个构建目录/嵌套树结构的功能……

我遇到的问题是节点的渲染并没有按预期工作.

只有当列表中已有产品节点并且可以创建部分但是尝试将子部分添加到已添加的部分时,才会呈现产品.部分和产品节点按预期插入到模型中 – 只是指令似乎不在原始模型中不存在的节点上运行.

相关代码：

<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",products: []
    });
  };
});

app
  .directive('adminSections',function() {
    return {
      reStrict: "E",replace: true,scope: {
        sections: '='
      },templateUrl: 'sections.html'
    };
  })
  .directive('adminSection',function($compilE) {
    return {
      reStrict: "E",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',scope: {
        products: '='
      },templateUrl: 'products.html',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?\n\nClick OK to confirm.')) {
            scope.products.splice(idx,1);
          }
        };
      }
    };
  })
  .directive('adminProduct',scope: {
        product: '='
      },templateUrl: 'product.html',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',scope: {
        product: "="
      },templateUrl: 'productform.html',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);
        }
      }
    };
  });