Is there a way to trigger a directive when a specific event occurs on the backend and sets a value to false?...
This is where the event is being captured
.factory('AuthInterceptor', function($q, $injector, $rootScope) {
return {
response: function(response) {
if (response.data.lineStatus) {
$rootScope.$broadcast('line:lineStatus', response.data.lineStatus);
}
return response;
}
});
Then, I handle the broadcast in this section
.factory('BetSlipFactory', function($rootScope) {
var processingLineMoves = false;
$rootScope.$on('line:lineStatus', function(ev, status) {
status.selections = _.map(status.selections, function(selection) {
selection.display = false;
return selection;
});
if (!status.linesOK) {
if (!processingLineMoves) {
processingLineMoves = true;
$rootScope.linesMovedModal = $popover(angular.element('#linesMovedModal'), {
template: 'views/linesMovedModal.html',
html: true,
autoClose: false,
placement: 'left',
trigger: 'manual',
animation: 'fx-fade-down',
scope: _.assign($rootScope.$new(), status, {
okPicks: function(selection, selections, index) {
if (selections[index + 1] || selections.length > 1) {
$rootScope.betLoader = true;
selections.splice(index, 1);
$rootScope.betLoader = false;
} else {
$rootScope.linesMovedModal.hide();
processingLineMoves = false;
selections.splice(index, 1);
}
},
removePick: function(selection, selections, index) {
console.log('selections', selections);
betSlipSelectionRequest('/betSlip/removeSelection', {
game: selection.game,
pair: selection.pair,
line: selection.line
}).then(function() {
selections.splice(index, 1);
$rootScope.$broadcast('lines:removeAllLines');
if (selections[index + 1] || selections.length > 1) {
$rootScope.betLoader = true;
$rootScope.betLoader = false;
} else {
$rootScope.linesMovedModal.hide();
processingLineMoves = false;
}
}, function(err) {
console.log(err);
});
}
})
});
$timeout(function() {
$rootScope.linesMovedModal.show();
}, 800);
}
}
});
});
Essentially, the $rootScope.$on part needs to be integrated into a directive. The purpose is to activate a popover that shows some information, with the starting point being the $rootScope variable: $rootScope.linesMovedModal
The reason for transitioning this to a directive is due to the usage of DOM manipulation using $popover(angular.element('#linesMovedModal')
In case you are interested, here is the link to the popover component I am utilizing: Popover Component