Proper way to change a instantiate button in parent view/control

Question

I'm creating a single-page web app that has one controller for the overall page (PageController) and separate child controllers for two views (ViewController and EditController).

ViewController needs a button called "Edit" in the titlebar of the app, EditController needs a button called "Save". The buttons occupy the same space, but have different labels and different on-click handlers. The titlebar belongs to the parent template/controller (i.e. PageController) scope.

One way to accomplish this is to create the button in the parent scope and let the child controllers change the text and override the ng-click handler - but I'm thinking there's probably a better way with Angular. I'd like some way for the child controllers to "inject" (not sure if this is the proper use of the word here) their button into to the parent template and handle the onclick locally, making the parent agnostic of what goes on in the child controllers...

Answer 1

I would think about your "views" differently. To me, titlebar is a view, just like your View and Edit views. It should therefore either contain all of the HTML it needs to render whatever you might want to show in that view, or it should know which files to ng-include.

Views are driven by models. The View and Edit controllers should call methods defined on whatever controller (or service) contains the titlebar model to set some state/properties appropriately. The titlebar view/HTML would use ng-show/hide or ng-include directives to show/include the appropriate HTML based on the current state of the model/$scope.

To be notified of a button click, the View and Edit scopes could $watch a model/$scope property for a change. E.g., <a ng-click="buttonState.clicked=true">...</a> I'm using an object with a clicked property so that the child controllers can reset the value inside their $watch callbacks (if a primitive was used, resetting would not work -- a new child scope property would be created):

$scope.$watch('buttonState.clicked', function() {
   buttonState.clicked = false
   ... handle button click here ...
}