में नए संस्थाओं से दिखाई नहीं दे जो एक निर्देशिका/नेस्ट वृक्ष संरचना के निर्माण के लिए एक सुविधा शामिल है एक कोणीय एप्लिकेशन का विकास ...कोणीय नेस्टेड निर्देश मॉडल
मुद्दा मैं आ रही हैं नोड्स के प्रतिपादन काफी नहीं है इरादे के रूप में काम कर रहे हैं।
उत्पाद केवल तभी प्रस्तुत किए जाते हैं जब सूची में पहले से ही कोई उत्पाद नोड होता है और अनुभाग बनाए जा सकते हैं लेकिन जोड़े गए एक को उपधारा जोड़ने का प्रयास नहीं किया जाता है। अनुभाग और उत्पाद नोड्स को मॉडल में अपेक्षित रूप से डाला जा रहा है - बस यह कि निर्देश मूल मॉडल में मौजूद नोड्स पर काम नहीं कर रहे हैं।
प्रासंगिक कोड:
एचटीएमएल
<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="[email protected]" 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?\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
उम्मीद है कि आप आशय देख सकते हैं।
किंवदंती - मैंने वास्तव में बटरंग को हटा दिया क्योंकि यह मेरे कोड को काम करने से रोकने के लिए प्रतीत होता है - हटाने के लिए कुछ अपेक्षित व्यवहार होने की अनुमति है, लेकिन मुझे संदेह है कि अनंत लूप वास्तविक कारण था ... बहुत बहुत धन्यवाद - मुझे यकीन था कि यह कुछ था बाइंडिंग/वॉचर्स कैसे काम करते हैं, इस बारे में सरल और थोड़ी सी समझ में कुछ स्पष्ट रूप से कमी आई थी। –