We Keep Coding

Passing data between controller via service won't work

I'm trying all the approaches passing data between controllers using service, factory or broadcast. None of them works for me. I follow the exact solution online, but still unfortunate. I placed service inside my app.js.
App.JS
myApp.service('customService', [function () {
this.list = [];
this.setObject = function (o) {
this.list.push(o);
},
this.getObject = function () {
return this.list;
}
}]);
Controller #1
myApp.controller('Controller1', function ($scope, customService) {
customService.setObject({..});
$window.open("/controller2", '_blank');
}
Controller #2
myApp.controller('Controller2', function ($scope, customService) {
console.log(customService.getObject()); // Returns []
}
Problem
It returns [] on controller 2 from controller 1, instead of object data.

You should modify your service for storing a object under some specific key, and then retrieve it later given that key. You can define these keys whatever you like. I defined them in the same service so I can reuse them through all controllers. Something like this
Service
myApp.service('customService', [function () {
this.keys = {"foo": "foo", "bar": "bar"};
this.list = {};
this.setObject = function (obj, key) {
this.list[ley] = obj;
},
this.getObject = function (key) {
return this.list[key];
}
}]);
Controller #1
myApp.controller('Controller1', function ($scope, customService) {
customService.setObject({"propX": "propX"}, customService.foo);
//$window.open("/controller2", '_blank');
/* I encourage you to use something like ngRoute here for navigating
* so, you should do something like $location.path('/controller2');
*/
}
Controller #2
myApp.controller('Controller2', function ($scope, customService) {
console.log(customService.getObject(customService.foo));
}

Are your controllers in the same page ?
Angular.js only works and keeps data on a single page. If your page reloads
(as you seem to indicate when you say "express.js loads the next
page", then it reinitialized everything.
You should either:
look at how to use Angular.js routing
(http://docs.angularjs.org/tutorial/step_07) so that you stay on the
same page. use something to persist your data, such as localstorage.
Find out more: http://diveintohtml5.info/storage.html
ref : Using angular service to share data between controllers

have you used routing? if u use then your code should be work.

sharing data between controllers in two different ng-app not working via shared service

So I have two different html pages, two different ng-apps and two controllers. I am trying to share data between controllers and different modules.
Below is the basic structure of the application
index.html
- indexController.js
login.html
- loginController.js
sharedService.js
angular.module('sharedService', []).service('SharedService', function() {
var SharedService;
SharedService = (function() {
function SharedService() {
console.log('initializing');
}
var _data;
SharedService.prototype.setData = function( data) {
_data = data;
/* method code... */
};
SharedService.prototype.getData = function( ) {
return _data ;
};
return SharedService;
})();
if (typeof(window.angularSharedService) === 'undefined' || window.angularSharedService === null) {
window.angularSharedService = new SharedService();
}
return window.angularSharedService;});
angular.module("loginApp", ['sharedService'])
controller("loginCtrl",[
'SharedService', function(SharedService){
SharedService.setData(data);
}
angular.module("mainApp", ['sharedService'])
controller("someCtrl",[
'SharedService', function(SharedService){
console.log(SharedService.getData());
}
The thing is since the app is different i am referenceing the
<script src="sharedService.js"></script>
the service gets initialized twice. when i set the data from loginApp sets the data but however when i query the data from mainApp, it retrieves undefined, i suspect this is because the service gets initialized again and is a different instance of sharedService

You are correct, the service will not be shared between two angular apps on different html pages. You will need to persist the data you want to share in somewhere other than memory, such as localStorage or a remote server. https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

Just played a bit with it. You can just put the _data you want to share between two apps onto the window object. Like so
angular.module('serv', [])
.factory('MyFactory', function () {
window._data = 'default';
return {
setData: function (val) {
console.log('setData() called with val == ', val);
window._data = val;
},
getData: function () {
return window._data;
},
}
});
See this plunker: http://plnkr.co/edit/4896aiczBjMiCXazB2Kk?p=preview
Though that seems to be somewhat ugly. Probably want to at least namespace it.

Sharing data from asynchronous calls amongst directives in AngularJS with TypeScript

I can find bits and pieces of how to solve this, but no concrete way to make it work.
I have an asynchronous call to a server to fetch data in AngularJS and wish to store it in a variable. This variable then needs to be accessible to all the directives in the app, but they obviously all need to wait for the variable to be assigned before they can use it. I'm also using TypeScript and its export functionality to spin directives from their own functions.
Controller
export class MainController{
fundData: Object;
constructor(scope, FundService) {
FundService.fetchData('some_param').then(d => {
let data = d[0],
fundProps = data.properties_pub;
this.fundData = {
'isin': data.clientCode,
'nav': fundProps.nav.value,
'nav_change': fundProps.nav_change.value.toFixed(2),
'nav_change_direction': change,
'total_aum': fundProps.net_asset.value.toFixed(2)
};
scope.ctrl = this;
});
}
}
Directive
class OverviewController {
scope: ng.IScope;
constructor(scope){
scope.$watch('data', newVal => {
console.log(newVal);
});
}
}
OverviewController.$inject = ['$scope'];
export function overview(): ng.IDirective {
return {
restrict : "C",
controller : OverviewController,
controllerAs : "overview",
template : require("../templates/overview"),
bindToController :{
data: '='
}
}
}
HTML
<div ng-controller="MainController">
<div class="overview" data="ctrl.fundData"></div>
</div>
Bootstrap Process
let module = angular.module(MODULE_NAME,[])
.controller('MainController', ['$scope','FundService', MainController])
.service('FundService', FundService)
.directive('overview', overview);
Things I've Tried:
$rootScope
I can set something static and share it, so this works:
$rootScope.data = 2;
This doesn't:
someFunction().then(data => { $rootScope.data = data });
Maybe there's something about promises in $rootScope I don't understand.
Setting in controller
I can set the result of the call to a variable in the controller, set that to an attribute in the directive, and then bind the attribute to its controller, but this doesn't work either, even if I use $watch on the variable.

What I would do is fetch the data, store it in a service (which I think you are already doing) and then broadcast an event when the data in the service is updated. Here's an example (in raw javascript)
module.service('DataService', function(rootScope) {
...
var data;
services.setData = function(newData) {
data = newData;
rootScope.$broadcast('DataUpdated');
};
...
});
And then in your directives all you would need to do is listen for the 'DataUpdated' event:
scope.$on('DataUpdated', ...);
Hope that helps!

AngularJS automatically updating controller data by service

I'm having some basic problems with angular at the moment. I just wrote a service that reads the temperature of an external device in an interval of five seconds. The service saves the new temperature into a variable and exposes it via a return statement. This looks kind of this (simplified code):
angular.service("tempService", ["$interval", function ($interval) {
//revealing module pattern
var m_temp = 0,
requestTemp = function() {//some logic here},
onResponseTemp = function (temp) {
m_temp = temp;
},
//some other private functions and vars ...
foo = bar;
//request new temperture every 5s, calls onResponseTemp after new data got received
$interval(requestTemp, 5000);
return {
getTemp = function(){return m_temp;}
}
}]);
I use a controller to fetch the data from the service like this:
angular.controller("tempCtrl", ["$scope", "tempService", function ($scope, tempService) {
$scope.temp = tempService.getTemp();
}]);
In my view I access it like this:
<div ng-controller="tempCtrl">
<p>{{temp}}</p>
</div>
But I only get 0 and the value never changes. I have tried to implement a custom Pub/Sub pattern so that on a new temperature my service fires an event that my controller is waiting for to update the temperature on the scope. This approach works just fine but I'm not sure if this is the way to go as angular brings data-binding and I thought something this easy had to work by itself ;)
Help is really appreciated.

Please see here http://jsbin.com/wesucefofuyo/1/edit
var app = angular.module('app',[]);
app.service("tempService", ["$interval", function ($interval) {
//revealing module pattern
var m_temp = {
temp:0,
time:null
};
var requestTemp = function() {
m_temp.temp++;
m_temp.time = new Date();
};
var startTemp = function() {
$interval(requestTemp, 3000);
};
return {
startTemp :startTemp,
m_temp:m_temp
};
}]);
app.controller('fCtrl', function($scope,tempService){
$scope.temp = tempService;
$scope.temp.startTemp();
});

You are returning a primitive from your service, if you want to update an primative you need to reftech it. You should return an object, as on object is passed by reference, you get the actual values in your controller.
do this in your service:
return m_temp;
And this in your controller:
$scope.temp = tempService;
and your view will update as soon as the service gets updated.
Does this help you?

i think you should use $interval in controller ot in service
$interval(tempService.getTemp(), 5000);

AngularJS retrieve data via AJAX before Directive runs

I'm using AngularUI's uiMap directives to instantiate a google map. The uiMap directive works great with hard-coded data ({mapOptions} and [myMarkers]); however I run into trouble when I retrieve this data via $http.get() (the directive fires before the AJAX call has finished).
Initially I was executing the GET in my GoogleMaps controller, but when I realised things were happening out of sequence, I moved the GET into the uiMap directive. I've got 2 problems with this:
I think this is not the correct way to do this.
The GET also retrieves the data for [myMarkers]
The function/directive that creates the markers is ubiquitous in that it is responsible for creating all overlays
So my question is, is there somewhere else in the application where I can retrieve the data (and apply it to scope) before the directive runs?
I read up on $q, and that kind of sounds like what I want, but I'm not sure if I can do it within my controller rather than in the directive (also not sure how $q.defer.resolve() is any different than $http.success()).
EDIT Most of the code I'm using is copy/paste from AngularUI's doc, but here's a plunk: http://plnkr.co/edit/t2Nq57
Solution
Based on Andy's answer, I used a combination of uiMap and uiIf:
<!-- index.html -->
<div
id="map_container"
ng-controller="GoogleMaps">
<div ui-if="mapReady">
<div
ng-repeat="marker in markers"
ui-map-marker="markers[$index]"
ui-event="{'map-click':'openMarkerInfo(marker)'}"
></div>
<div
ui-map-info-window="myInfoWindow"
ng-include="'infobox.html'"
></div>
<div
id="map_canvas"
ui-map="myMap"
ui-options="mapOptions"
></div>
</div>
</div>
Caveat 1 uiIf cannot be in the same element that specifies the controller furnishing its condition (uiIf has higher priority than ngController, so its controller won't get set before uiIf executes).
Caveat 2 Be sure to use the most recent version of uiIf (the version supplied in the most recent tag, v0.3.2, is out of date). The old one has bug causing a TypeError under certain circumstances.
Caveat 3 jQuery MUST be included before AngularJS (in index.html); else you will receive a TypeError stating that Object [object Object] has no method 'trigger' (or Object [object HTMLDivElement] has no method 'trigger' on Windows). Chrome will allow you to step into the trigger function because Chrome knows about it, but Angular does not (and Angular is throwing the error).
function GoogleMaps( $scope , $http )
{
var mapDefaults = {
center: new google.maps.LatLng(25,-90),//centres on Gulf of Mexico
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.mapOptions = {};
$scope.mapReady = false;
$scope.markers = [];
$http.get('map.json').then(function mapData(response) {
var map_data = response.data,
user_defaults = map_data.user.defaults; //{center: [lat,lng], zoom: 15}
$scope.mapOptions = {
"center": (typeof user_defaults.center !== 'undefined') ?
new google.maps.LatLng(user_defaults.center[0],user_defaults.center[1])
: mapDefaults.center,
"zoom": (typeof user_defaults.zoom !== 'undefined') ?
parseInt(user_defaults.zoom,10)
: mapDefaults.zoom,
"mapTypeId": mapDefaults.mapTypeId
};
//working on code to populate markers object
$scope.mapReady = true;
});
// straight from sample on http://angular-ui.github.com/#directives-map
$scope.addMarker = function($event) { … };
$scope.openMarkerInfo = function(marker) { … };
$scope.setMarkerPosition = function(marker, lat, lng) { … };
}//GoogleMaps{}
Drawback uiMap does not currently support rendering makers on domready. I'm looking into an alternative version of uiMapMarker suggested in this GitHub issue / comment.
Solution to this issue: https://stackoverflow.com/a/14617167/758177
Working example: http://plnkr.co/edit/0CMdW3?p=preview

You could just delay execution of ui-map until your data is loaded.
HTML:
<div ui-if="loadingIsDone">
<div ui-map="myMap" ui-options="myOpts"></div>
</div>
JS:
$http.get('/mapdata').then(function(response) {
$scope.myOpts = response.data;
$scope.loadingIsDone = true;
});

Generally, what you can do is have your directive get set up, start the load and finish in the success. I'm assuming you want to load one piece of data for all instances of your directive. So here's some psuedo-code for how you might want to attack this:
app.directive('myDelayedDirective', ['$http', '$q', function($http, $q) {
//store the data so you don't load it twice.
var directiveData,
//declare a variable for you promise.
dataPromise;
//set up a promise that will be used to load the data
function loadData(){
//if we already have a promise, just return that
//so it doesn't run twice.
if(dataPromise) {
return dataPromise;
}
var deferred = $q.defer();
dataPromise = deferred.promise;
if(directiveData) {
//if we already have data, return that.
deferred.resolve(directiveData);
}else{
$http.get('/Load/Some/Data'))
.success(function(data) {
directiveData = data;
deferred.resolve(directiveData);
})
.error(function() {
deferred.reject('Failed to load data');
});
}
return dataPromise;
}
return {
restrict: 'E',
template: '<div>' +
'<span ng-hide="data">Loading...</span>' +
'<div ng-show="data">{{data}}</div>' +
'</div>',
link: function(scope, elem, attr) {
//load the data, or check if it's loaded and apply it.
loadData().then(function(data) {
//success! set your scope values and
// do whatever dom/plugin stuff you need to do here.
// an $apply() may be necessary in some cases.
scope.data = data;
}, function() {
//failure! update something to show failure.
// again, $apply() may be necessary.
scope.data = 'ERROR: failed to load data.';
})
}
}
}]);
Anyhow, I hope that helps.

I am not sure if this will help without seeing code, but I ran into this same issue when I was creating my $scope.markers object inside the $http.success function. I ended up creating the $scope.markers = [] before the $http function, and inside the .success function, I populated the $scope.markers array with the return data.
So the $scope object was bound while the directive was compiling, and updated when the data returned.
[UPDATE SUGGESTION]
Have you tried taking advantage resolve in your route?
function($routeProvider) {
$routeProvider.
when(
'/',{
templateUrl: 'main.html',
controller: Main,
resolve: {
data: function(httpService){
return httpService.get()
}
}
}).
otherwise({redirectTo: '/'});
}
I usually put my $http requests in a service, but you could call the $http right from your route:
App.factory('httpService'), function($http){
return {
get: function(){
$http.get(url)
}
}
});
Then, in your controller, inject data and set your $scope items to the data.