http://plnkr.co/edit/bdHiU0?p=preview
When I require a variable that is returned by a service, like the data in
InitTickersFactory.returnTickers()vm.tickersObject. However, in the plnkr example provided above, I am simply toggling a variable in my tickerController and then passing it on to be stored in AddTickerFactory.
Click on the open modal button to view the logs.
Now, I need my tickerModalController to retrieve this variable and decide whether to display or hide a modal. Unfortunately, vs.showModal in my tickerModalController remains stuck at false:
vs.showModal = AddTickerFactory.getToggleStatus();Markup
<ticker-modal></ticker-modal>
<tickers-panel></tickers-panel>
Full code
// Code goes here
angular.module('app', [])
.directive('tickersPanel', function() {
return {
restrict: "E",
link: function($scope, el, attrs) {
// console.debug($scope, attrs);
},
template: '<div class="ticker" ng-controller="tickerController"><button ng-click="openModal()">Open Modal</button></div>'
};
})
.directive('tickerModal', function() {
return {
restrict: "E",
link: function($scope, el, attrs) {
// console.debug($scope, attrs);
},
template: '<div class="modal" ng-show="showModal" ng-controller="tickerModalController"><h1>Hello World!</h1></div>'
};
})
.factory('AddTickerFactory', [function() {
var vm = this;
vm.addTickerToggle = false;
var addTicker = {
toggleAddTicker : toggleAddTicker,
getToggleStatus : getToggleStatus
}
return addTicker;
function toggleAddTicker(bool) {
console.log(bool);
vm.addTickerToggle = bool;
}
function getToggleStatus() {
return vm.addTickerToggle;
}
}])
.controller('tickerController',
['$scope',
'AddTickerFactory',
function($scope,
AddTickerFactory) {
var vs = $scope;
vs.addTicker = false;
vs.openModal = openModal;
function openModal() {
vs.addTicker = !vs.addTicker;
AddTickerFactory.toggleAddTicker(vs.addTicker);
}
}])
.controller('tickerModalController',
['$scope',
'AddTickerFactory',
function($scope,
AddTickerFactory) {
var vs = $scope;
vs.showModal = false;
vs.showModal = AddTickerFactory.getToggleStatus();
console.log('vs.showModal',vs.showModal);
vs.displayModal = displayModal;
function displayModal() {
vs.showModal = !vs.showModal;
}
}]);
I attempted to set up a watch, but it does not detect any changes:
vs.showModal = AddTickerFactory.getToggleStatus();
console.log('vs.showModal',vs.showModal);
$scope.$watch('vs.showModal', function(current, original) {
console.log('current',current);
console.log('original',original);
});