I've never worked with dynatree but it seems that the tree is not being redrawn when the src array changes.
Try watching for changes on scope.tree.data
and reload the dynatree when it occurs:
MyApp.directive('dynatree', function ($rootScope) {
return {
restrict: 'E',
link: function postlink(scope, element, attrs) {
$(element).dynatree({
onActivate: function (node) {
scope.$emit('nodeActivated', node);
},
persist: true,
children: scope.tree.data //this variable is in the layout for either csb or sku
});
scope.$watch('tree.data', function() {
// try to update the tree data here (I'm not aware how it's done)
// and after that, reload...
$(element).dynatree("getTree").reload();
});
}
};
});
If there's no way to update the tree data, try destroying the dynatree and recreating it (inside the watcher function):
// destroy tree
$(element).dynatree("destroy");
// recreate tree with new data
$(element).dynatree({ ... children: scope.tree.data ... });
Note that I've used tree.data
and not treeData
, that's because you should not store this kind of information directly on the scope, instead you should store it inside a model (i.e. scope.tree = { data: [ ... ] }
).