Ian*_*ood 7 angularjs angularjs-directive
开发一个角度应用程序,其中包含构建目录/嵌套树结构的功能......
我遇到的问题是节点的渲染并没有按预期工作.
只有当列表中已有产品节点并且可以创建部分但是尝试将子部分添加到已添加的部分时,才会呈现产品.部分和产品节点按预期插入到模型中 - 只是指令似乎不在原始模型中不存在的节点上运行.
相关代码:
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>
JS
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?\n\nClick 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
希望你能看到意图.
问题是，您在链接指令时添加列表，具体取决于调用链接函数时节的状态（仅一次，当 Angular 看到它时）。
当您添加新的小节时，它会被链接，但它的小节列表为空，因此没有任何小节，并且结果元素没有小节，因为您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您的指令将监视每个部分中的部分数组并相应地更新列表，同时在数组为空时保持为空。
至于嵌套指令如何工作，这里有一篇关于何时调用嵌套指令的链接和控制器函数的好文章。
一般来说，controllers 在解析任何内部指令之前运行，而links 在解析之后运行。因此，如果您有这样的嵌套指令：
<outer-directive>
<inner-directive></inner-directive>
</outer-directive>
顺序如下：
这就是为什么当我尝试将指令添加admin-sections到每个部分的模板时，解析器进入无限循环。解析每个部分意味着调用link该部分的另一个子部分，但$compile在外部admin-section的链接函数中使用意味着它将在处理外部指令后对其进行解析。
此外，内部指令可以require（文档）父指令来使用它们的控制器。
| 归档时间： |
|
| 查看次数： |
830 次 |
| 最近记录： |