In my application, a user can choose a subject from a dropdown and create multiple notes about that subject. Each note is a directive which is a child of the subject scope and each note has an isolate scope. At the moment, the user can close a note manually which dirty checks it and allows the user to save or cancel, etc., before the note is removed from the view. What I'd like to achieve, however, is to call the 'closeNote' method on each of the notes when the subject field is changed in the dropdown menu.
I've started to implement this with a directive on the subject dropdown menu which broadcasts an event to the notes on change:
(function(){
'use strict';
var changeSubjectSelect = function(){
function linkFn(scope, element, attrs){
function onSubjectChange(e){
scope.$broadcast('saveAllNotes', {data: 'some data'});
scope.$apply(attrs.changeSubjectSelect);
}
element.on('change', onSubjectChange)
}
return{
restrict: 'A',
link: linkFn
}
}
angular.module('ganeshaApp')
.directive('changeSubjectSelect', changeSubjectSelect)
})();
Then I'm picking up the event in the each of the note directives:
//in the noteDirective controller
$scope.$on('saveAllNotes', function(event, data){
console.log(e);
closeNote();
})
function closeNote(){
//dirty check the note, call modal to save or cancel, close note
}
So far the event is being broadcast to each of the isolate child note directives that are opened, but the function closeNote() is only being called by the last directive in the list. Ideally, I'd like the event to be called on each of the directives in sequence, e.g. 'Note X has changes, would you like to save', then 'Note Y has changes, would you like to save', etc. I'm admittedly not very experienced with these methods...it would be great if someone had some tips or advice on how to achieve this type of use case.
