I'm having trouble figuring out how to programmatically instantiate directives. For example, in the tabbed panels example, suppose I want to have a function to "Add a new tab" in the parent tabs directive; how should the tabs directive instantiate a new pane directive and add it to the DOM?
Add a comment |
1 Answer
I would have a scope variable containing the list of panes you want to display, put the HTML for a single pane inside an ng-repeatand have the "add a new tab" function simply add another object to the list of panes; Angular's two-way binding would have the list of DOM elements inside the ng-repeat updated upon updating the list.
3 Comments
Chung Wu
To clarify -- what's this list of panes? Is it the $scope.panes list already on the tabs directive (which, I guess, are instances of the pane directive scopes)? If so, how do I instantiate one of these instances?
Raibaz
You could, for instance, add to the tabs directive template a button with
ng-click="addNewPane(), with the tabs directive itself specifying a $scope.addNewPane function that creates a new pane object and pushes it into $scope.panes.Chung Wu
How do you directly instantiate a "new pane object" like the ones currently stored in $scope.panes? They look like $scope instances of the pane directive...