AngularJS : Recursive tree style - angularjs

Question

as the name suggests i am trying to build a recursive tree directive I has to mimic the structure from the expression builder as that's how its been setup and i want to replace it with an angular component. I have had a look at the other posts on the forum but mine is not exactly the same.
the fiddle thanks to julien for showing me how to fix it.
the model which is based off the expression builder has a structure like a condition object inside a field then an expression array and then another array which will be called nested expression but essentially will contain a condition object and this can be nested as deep as it wants to go.
Anyway so i created a directive to create a list entry for each entry in the expression builder (ng-repeat) then i created a link function to find out when its at the last loop and after that repeat the loop for every item in the nested expression array (there must be a better way to do this).
It works for the nestings but now i want to assign a button at each root level ul so that you add a new entry(expression) to the array another but when i try it seems to duplicate the array and then attach the new value.
The other tasks is to:
And a root level button so that you can add a second nested expression array (i,e, two ul's at the same level) , a root level delete so that you can delete a whole ul nesting and a delete at each li so that you can delete just one expression.
I will keep at the fiddle but maybe someone can solve it before i can get the fiddle working.
Any help will be greatly appreciated
Regards
angular.module("expressionBuilderApp", [])
.controller('ExpressionBuilderController', ['$scope', function($scope) {
$scope.conditions = {
operator : "and",
expressions : [
{
name : "moo"
},
{
name : "mooest"
},
{
name : "mooster"
}
],
nestedexpressions : [
{
operator : "or",
expressions : [
{
name : "bow wow"
},
{
name : "woof woof"
}
],
nestedexpressions : [
{
operator : "or",
expressions : [
{
name : "meow"
},
{
name : "meeew"
}
],
nestedexpressions : [
{
operator : "And",
expressions : [
{
name : "oink"
},
{
name : "squeel"
}
],
nestedexpressions :
[
]
},
{
operator : "Or",
expressions : [
{
name : "hoot hoot"
},
{
name : "stares with yellow eyes"
}
],
nestedexpressions :
[
]
}
]
}
]
}
]
};
}])
.directive('expressionBuilder', function(){
return {
restrict: 'E',
template : '<ul><button ng-click="addNewCondition(conditions.expressions)">add</button><li nested-expressions="" conditions="conditions.nestedexpressions" ng-repeat="expression in conditions.expressions" >{{expression.name}}</li></ul>',
replace: true,
scope: {conditions: "="},
controller: function($scope){
$scope.addNewCondition = function(arrayToPushInto){
var newCondition = {name: "testing"};
arrayToPushInto.push(newCondition);
}
}
}
})
.directive('nestedExpressions', function($compile) {
return {
restrict: 'A',
replace: true,
link: function(scope, element, attrs){
if (scope.$last){
var conditions = scope.conditions;
console.log(conditions) ;
if(conditions.nestedexpressions.length > 0){
element.after($compile('<li ng-repeat="nestedexpression in conditions.nestedexpressions"><expression-builder conditions="nestedexpression"></expression-builder></li>')(scope));
}
}
}
}
});

Answer 1

I don't know why to be honest but i based my code of this so thanks buddy whoever you are.
Ng-include seems to just use the scope of the array passed in and does not duplicate the functions through directive nesting see the [fiddle] (http://jsfiddle.net/cerebral86/g62KP/5/)
Hopefully this helps someone else.
<script type="text/ng-template" id="conditionExpressionBuilder.html">
<div>
<div>
<button ng-click="addNestedCondition(conditions.nestedexpressions)">Add ()</button>
<button ng-click="addNewCondition(conditions.expressions)">Add node</button>
</div>
<div>
<select>
<option ng-selected="{{conditions.operator == operator.value}}" ng-repeat="operator in operators" value="{{operator.value}}">{{operator.display}}</option>
</select>
</div>
<div>
<ul>
<li ng-repeat="expression in conditions.expressions">
<div>
<span>
<button ng-click="delete(expression, conditions.expressions)" ng-disabled="$first">Delete Item</button>
</span>
<span>
<select>
<option ng-selected="{{filterfield.value == expression.filterField}}" ng-repeat="filterfield in filterfields" value="{{filterfield.value}}">{{filterfield.display}}</option>
</select>
</span>
<span>
<select>
<option ng-selected="{{comparator.value == expression.comparator}}" ng-repeat="comparator in comparators" value="{{comparator.value}}">{{comparator.display}}</option>
</select>
</span>
<span><input type="text" value="{{expression.expressionValue}}" /></span>
</div>
</li>
<li ng-repeat="conditions in conditions.nestedexpressions" ng-if="conditions.expressions.length > 0">
<button ng-click="removeNestedCondition($index, $parent.$parent.conditions.nestedexpressions)">Remove ()</button>
<ng-include src="'conditionExpressionBuilder.html'"></ng-include>
</li>
</ul>
</div>
</div>
</script>
angular.module("expressionBuilderApp", [])
.controller('expressionBuilderController', ['$scope', function($scope) {
$scope.operators = [
{
display: "And",
value: "and"
},
{
display: "Or",
value: "or"
}
];
$scope.filterFields = [
{
display: "Code",
value: "code"
},
{
display: "Capital",
value: "capital"
},
{
display: "Government",
value: "government"
},
{
display: "Population",
value: "population"
}
];
$scope.comparators = [
{
display: "contains",
value: "contains"
},
{
display: "Starts With",
value: "startswith"
},
{
display: "Ends With",
value: "endswith"
},
{
display: "Doest not Contain",
value: "doesnotcontain"
}
];
$scope.conditions = {
operator: "and",
expressions: [
{
filterField: "code",
comparator: "contains",
expressionValue: "moo"
},
{
filterField: "capital",
comparator: "startswith",
expressionValue: "mooest"
},
{
filterField: "government",
comparator: "endswith",
expressionValue: "mooster"
}
],
nestedexpressions: [
{
operator: "or",
expressions: [
{
filterField: "code",
comparator: "endswith",
expressionValue: "bow wow"
},
{
filterField: "government",
comparator: "doesnotcontain",
expressionValue: "woof woof"
}
],
nestedexpressions: [
{
operator: "or",
expressions: [
{
filterField: "code",
comparator: "contains",
expressionValue: "meow"
},
{
filterField: "code",
comparator: "contains",
expressionValue: "meeew"
}
],
nestedexpressions: [
{
operator: "And",
expressions: [
{
filterField: "government",
comparator: "doesnotcontain",
expressionValue: "oink"
},
{
filterField: "code",
comparator: "endswith",
expressionValue: "squeel"
}
],
nestedexpressions:
[
]
},
{
operator: "Or",
expressions: [
{
filterField: "code",
comparator: "doesnotcontain",
expressionValue: "hoot hoot"
},
{
filterField: "code",
comparator: "contains",
expressionValue: "stares with yellow eyes"
}
],
nestedexpressions:
[
]
}
]
}
]
}
]
};
}])
.directive('conditionExpressionBuilder', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'conditionExpressionBuilder.html',
scope: {
conditions: "=",
operators: "=",
filterfields: "=",
comparators: "="
},
controller: function($scope)
{
$scope.addNewCondition = function (arrayToPushInto) {
var newCondition = { name: "testing" };
arrayToPushInto.push(newCondition);
};
$scope.delete = function (expressionItem, expressionArray) {
var index = expressionArray.indexOf(expressionItem);
expressionArray.splice(index, 1);
};
$scope.removeNestedCondition = function (index, nestedExpressionArray) {
nestedExpressionArray.splice(index, 1);
};
$scope.addNestedCondition = function (nestedExpressionsArray) {
var nestedConidtion = { operator: "", expressions: [{}], nestedexpressions: [{}] };
nestedExpressionsArray.push(nestedConidtion);
};
}
}
});