Closed kasajian closed 8 years ago
Based on https://github.com/iVantage/angular-ivh-treeview/issues/22
I used this template which mostly worked:
// Remove the built in ivhTreeviewCheckbox directive
myApp.config(function($provide) {
$provide.decorator('ivhTreeviewCheckboxDirective', function($delegate) {
$delegate.shift();
return $delegate;
});
});
// Supply your own checkbox directive that does nothing other than bind to the selected state of the node
myApp.directive('ivhTreeviewCheckbox', function() {
return {
scope: {
node: '=ivhTreeviewCheckbox'
},
template: '<input type="checkbox" ng-model="node.selected" />'
};
});
This works, unfortunately, I wasn't able to determine how to get notification when the node changed. In one application, I need to propagate changes to the child and parent nodes in a way that's different than how this component is implemented by default.
For anyone who needs to do something similar, in order get notification of changes, you need to update the above template as follows:
node: '=ivhTreeviewCheckbox'
is not really doing anything useful. If you add a link property to the directive, you won't get anything in the 'node' property of the scope that's passed in. So I changed the value of scope to false
, and added a link field that calls onCbChange
app.directive('ivhTreeviewCheckbox', function() {
return {
scope: false,
template: '<input type="checkbox" ng-model="node.selected" />',
link: function(scope, element, attrs) {
element.on('click', function(event) {
scope.trvw.onCbChange(scope.node, scope.node.selected);
});
}
};
});
Now you can add a onCbChange property as documented. See Select/Deselect Handlers @ in the README.md.
Here's a code-pen that demonstrates it: http://codepen.io/kasajian/pen/grOyNe?editors=1011
I want the exact behavior as there is today, except that i don't want the state of the parent check-box to change when a child or descendant check-box is clicked.
That is,
I want to disable the behavior associated with 2.