Update scope value when service data changes - angularjs

I am trying to update the scope value on a view when the service data changes.
The problem is that, (a) if I update the data in a different controller, then (b) the value doesn't update on the view.
main.html
<!-- breadcrumb row -->
<div ng-controller="mainController">
<span ng-if="memberCompany !== null">{{ memberCompany }}</span>
</div>
<!-- / breadcrumb -->
main.js
// breadcrumb service
app.service('breadcrumb', function() {
// variables
var memberCompany = null;
return {
// get compnay
getCompany: function() {
return memberCompany;
},
// set company
setCompany: function(value) {
memberCompany = value;
}
}
});
// main controller
app.controller('MainController', ['$scope', 'breadcrumb', function($scope, breadcrumb) {
// get company to display in view
$scope.memberCompany = breadcrumb.getCompany();
}
]);
If I update the service value in a different controller, I would like to be able to display that updated value back on the index view so it's viable across the app
other controller
app.controller('otherController', ['$scope', 'breadcrumb', function($scope, breadcrumb) {
// update company
breadcrumb.setCompany('StackExchange');
// update the scope data in the view?
}]);
How can I display the updated value on the index view once it's changed?

You can use a $watch in your controller on that service:
$scope.$watch(function() {
return breadcrumb.getCompany()
}, function(newValue, oldValue) {
$scope.memberCompany = newValue;
});

If this is a site-wide necessity, I would definitely stay far, far away from adding a bunch of watches everywhere as they can be costly for development time as well as computer resources. I would first write the service accordingly:
angular.module('myModule').service('Breadcrumb', function() {
return {
company: null,
setCompany: function(company) {
this.company = company;
},
getCompany: function() {
return this.company;
}
};
});
Although in my opinion, the getters and setters are definitely very unnecessary ( you could just set by Breadcrumb.company = company and get by Breadcrumb.company). Moving on, you should assign the breadcrumb service to the root scope:
angular.module('myModule').run(function($rootScope, Breadcrumb) {
return $rootScope.breadcrumb = Breadcrumb;
});
Then at this point you can either inject this service into your controllers/directives and call upon it within any view in the application like so:
<span class="my-company-name" ng-bind="$root.breadcrumb.company.name" />
This saves you from having to call watchers on everything and allows for you to only inject the Breadcrumb service when you actually need it in the application logic. However, like I said at first, it really depends on how widely used this service is as you do not want to muddy up your $rootScope with arbitrary values. If you don't want to assign it to the $rootScope you could assign it in your controllers and directives:
angular.module('myModule').controller('ApplicationCtrl', function($scope, Breadcrumb) {
$scope.breadcrumb = Breadcrumb;
});
and access it from templates like this:
<span ng-bind="breadcrumb.company.whatever" />
Hope that helps!

Related

$rootScope is not updated in SPA

My first controller:
angular.module('application')
.controller('FirstController',['$rootScope',function($rootScope) {
var data=[0,1,2];
$rootScope.items=data;
}]);
My second controller:
angular.module('application')
.controller('SecondController',['$rootScope',function($rootScope) {
$rootScope.items[0]=3;
console.log($rootScope.items); // [3,1,2]
}]);
When the second controller is running, its corresponding view is changed; however not the same happens when going back to the corresponding view of the first controller (both views are bound to $rootScope.items). Why that happens? I am using ui-router and FirstController has to do with the main page of the SPA and SecondController with another page. Moreover, by keeping track of $rootScope.items with:
<pre>
{{$root.items | json}}
</pre>
in both templates the second one is renewed to [3,1,2] and the first one remains [0,1,2].
Passing the same $scope between the two controllers isn't an ideal way of maintaining a single data model, and what you need to do is to establish a service module (or a factory) to manage the data for you, so that both controllers can talk to the factor for your data.
This is how you set up the factory
app.factory("Data",
function () {
var storage = [0,1,2]; // where your data is
return {
get: function () {
return storage;
},
set: function (toSet) {
storage = toSet;
return storage;
}
};
});
to let the controllers know where the data is, use
app.controller ("FirstController",
function ($scope, Data)
{
console.log(Data); // [0,1,2]
Data.set( [3,1,2]); // demoing change
}
same is for the second controller
app.controller ("FirstController",
function ($scope, Data)
{
console.log(Data); // [3,1,2]
}

How to change parent controller's object instance using an AngularJS service?

I'm using nested controllers and UI-Router. My top level controller, called MainCtrl, is set in my app's index.html file. If the MainCtrl uses a service, to pass data around, how can I change an instance of an object in the MainCtrl from a child controller without using $scope?
This is basically what I have (typed from memory):
var mainCtrl = function (ProfileSvc) {
var vm = this;
vm.profile = ProfileSvc.profile;
};
var loginCtrl = function (ProfileSvc, AuthSvc) {
var vm = this;
vm.doLogin = function (form) {
if (form.$error) { return; }
AuthSvc.login(form.user, form.pass).
.then(function(response) {
ProfileSvc.profile = response.data.profile;
}, function(errResponse) {
// error
}
};
};
User #shershen posted a reply to another question that gave me the idea to use $scope.$on and an event, however I really do not want references to $scope in my code:
Propagating model changes to a Parent Controller in Angular
I think without using $scope you may want to use the Controller as ctrl in your views. So...
var mainCtrl = function (ProfileSvc) {
var vm = this;
vm.profile = ProfileSvc.profile;
vm.updateProfile = function(profileAttrs) {
vm.profile = ProfileSvc.update(profileAttrs);
}
};
Then in the view, something along the lines of:
<div ng-controller="mainCtrl as main">
<button ng-click="main.updateProfile({ name: 'Fishz' })">
</div>
Hope this helps!
I had to do something similar on a project and ended up using $cacheFactory. First just load it up as a service with something like:
myApp.factory('appCache', function($cacheFactory) {
return $cacheFactory('appCache');
});
Then make sure you inject appCache into your controllers and then in your controllers you can call the cache service's put and get methods to store and retrieve your object.
In my case the parent view and child view both can change the object I'm caching, but the user only can commit from the parent.

AngularJS - How do I modify variables in $rootScope?

I've got a potentially really dumb question, but how do I modify variables up in $rootScope in Angular? I've got a slide-in sidebar that I want to change the content on whenever someone clicks on a thumbnail, and I figured the easiest way to handle where the data in the sidebar comes from/the sidebar visibility would either be in global values, or in $rootScope. I'm trying to keep everything as simple as possible, but I just don't know how to handle modifying global variables.
My angular code surrounding this is:
app.run(function($rootScope) {
$rootScope.currentUrl = { value: 'visual/design/1/' };
$rootScope.detail_visible = { value: true };
});
app.controller('navController', ['$scope', '$rootScope',
function ($scope, $rootScope) {
$scope.isDetail = $rootScope.detail_visible.value;
$scope.url = $rootScope.currentUrl.value;
$scope.hide = function($rootScope) {
$rootScope.detail_visible.value = false;
};
}]);
and the connecting HTML is
<div id="detail_box" ng-class="{d_show: isDetail, d_hide: !isDetail}">
<div ng-include="url + 'detail.html'"></div>
</div>
In essence, I'm trying to make it so that when you click on a thumbnail, it changes the currentUrl value from 'visual/design/1/' to whatever they've clicked on (like, 'music/solo/2' or whatever) then changes the value of detail_visible to false, so that the classes on my sidebar switch and I get a nice little slide-in, with fresh content loaded via ng-include which I kind of love a thousand times more than I thought I would. I've been banging my head against this for about three hours now, breaking everything else on this app whenever I get the chance. What am I screwing up here? Alternatively, is there a better way of doing this?
My reason for using global variables is that I have multiple thumbnails in multiple controllers, and I want each one to be able to dynamically change the URL in my ng-include.
For your question, you change the $rootScope variable simple by referencing it with
$rootScope.detail_visible.value = newValue;
but you dont need to inject $rootScope to your function:
$scope.hide = function() { //without $rootScope
$rootScope.detail_visible.value = false;
};
But, I would suggest you to implement a service and not to pollute the rootscope for such task.
https://docs.angularjs.org/guide/services
Object properties of scopes are inherited -- in your controller, you should be able to modify $scope.detail_visible.value and see it affect the $rootScope. You still have to initialize it on the $rootScope in .run() though.
app.run(function($rootScope) {
$rootScope.currentUrl = { value: 'visual/design/1/' };
$rootScope.detail_visible = { value: true };
});
app.controller('navController', ['$scope', function ($scope, $rootScope) {
$scope.hide = function() { // don't need to pass an argument
$scope.detail_visible.value = false;
};
}]);
view:
<div id="detail_box" ng-class="{d_show: currentUrl.value, d_hide: !currentUrl.value}">
<div ng-include="currentUrl.value + 'detail.html'"></div>
</div>

Bind the value of a service to a controller so it updates if the service updates

There are a lot of references that discuss this, but I just need someone to confirm if this is right or not. If i have a service which I want to share information with a controller, and the controller should update on changes to the service I need to return an object from the service, like:
.factory('myService', ['$http', function($http) {
var data = {};
var service = {
constant: 1234,
getData: function() {
return data;
},
doCalculation: function() {
service.constant = data.const*25;
},
requestData: function() {
return $http.get('/blah')
.then(function( response ) {
data = response.data;
}
}
}
return service;
}])
Now to pass it to a controller for use and have it update if requestData is invoked again during maybe a route resolve() I would and can't do:
.controller('myCtrl', ['myService', function(myService) {
var self = this;
// PART 1
self.data = myService.constant; // this is not bound and will not update, yes?
self.data1 = myService.getData(); // this is not bound and will not update, yes?
// So, the above would be assigned or invoked only once on init of controller and
// would have to reset manually by assigning either a value or the result of the
// the function call again
self.myService = myService; // pass entire service
// Now, in controller functions or in the UI I can invoke the functions or access
// values, and those results will be bound and update on changes to the service
// since I've passed it in its entirety
self.getData = function() {
return self.myService.getData();
}
// PART 2
self.getData = myService.getData; // would you ever do this?
// You wouldn't have to pass the entire service if it had a bunch of different
// parts that maybe you didn't want to be available...
}]);
PART 1
<div ng-show="myCtrl.myService.doCalculation() === someNumber">You can't see me unless doCalculation resolves to someNumber</div>
PART 2
<div ng-show="myCtrl.getData() === anotherNumber">Would this work? and would you want to do this?</div>
I just can't seem to get the concept of how sharing data between a service(s) and a controller(s) works, and when it is working and when it won't. If all you can do is say correct, wrong, wrong, oh man so wrong, that's kewl, but if you can also say and this is why, I'd be ecstatic to put this away as finally resolved so I don't keep questioning it.
I wouldn't go too far here..
A controller is your view's helper. You need to generate vars and functions on your scope to help your view accomplish things.
Your business model however, is something that you would like to have one reference.
What I do is create my business model on a service, so multiple entities can share it(e.g. other services, directives, controllers etc.).
When my controller kicks in, I add a pointer to the model from the service and use the same reference between them. I bind the models properties to the view.
So:
A controller has it's own methods(dont share the service's methods). A controllers method should be short and use a service method as a helper.
A controller should have a reference to the business model which is created by a service. All your ajax calls should come from the service and populate\send the model that the service is holding.
A controller should have basic view functions(e.g. decide which css class to apply to an element). When you submit a form, the controller function should call the service's submit which will perform you ajax call.
Example:
Html:
<div ng-app="app">
<div ng-controller="myCtrl">
<input type="text" ng-model="Model.propA" />
<br/>
<input type="text" ng-model="Model.propB" />
<div ng-show="ShouldShowSecondDiv()">Second Div.</div>
<br/>
<button ng-click="SubmitForm()">Submit</button>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope, myService) {
// simple controller "view method".
$scope.ShouldShowSecondDiv = function () {
return $scope.Model.propB > 12;
};
// "complex" "non-view method" -> use service.
$scope.SubmitForm = function () {
myService.SubmitModelToServer();
};
// get the ref. from the service.
$scope.Model = myService.GetModel();
});
app.service('myService', function () {
this.Model = {};
// perform an ajax to get the model or whatever.
this.GetModel = function () {
this.Model = {
propA: 'Im prop A',
propB: 12
};
return this.Model;
};
// submit it to the server via $http. Check the log and you will see the binding(if you changed a value in the view).
this.SubmitModelToServer = function () {
console.log("ajax or whatever....submitted");
console.log(this.Model);
};
});
JSFIDDLE.

Why the modifications i apply on a service don't impact the DOM on all the controllers it is involved

I am new using AngularJS, i am interesting about the fact that when we update a data, Angular automatically impacts the modifications everywhere the data is involving.
But unfortunately, i can't make it works.
The simple thing i am trying to do is to make a change on a controller B, and i want the changes to be achieve on the controller A, since the data is referering to the same Service.
The data is correctly impacting on the both controllers, but the DOM is not updating according to this modification, here is the test:
HTML
<body>
<div ng-controller="ACrtl">
<h1>{{is_logged}}</h1> <!-- Always false -->
<button ng-click="check()">Check</button> <!-- true/false -->
</div>
<div ng-controller="BCrtl">
<button ng-click="{{is_logged=!is_logged}}">Toggle throught the DOM</button> <!-- Doesn't change anything on the Javascript -->
<button ng-click="toggle()">Toggle throught the controller</button> <!-- Change the Javascript but doesn't impact the other controller's scope -->
</div>
</body>
JS
var app = angular.module('MyApp', []);
app.controller('ACrtl', function($scope, UserService) {
$scope.is_logged = UserService.is_logged;
$scope.check = function() {
console.log('is_logged='+UserService.is_logged); //The change is correctly made when changin is_logged on the controller B.
$scope.is_logged = UserService.is_logged;
};
});
app.controller('BCrtl', function($scope, UserService) {
$scope.is_logged = UserService.is_logged;
$scope.toggle = function() {
UserService.is_logged = !UserService.is_logged;
};
});
app.factory('UserService', function() {
var User = {
is_logged: false
};
return User;
});
I hope AngularJS is able to do this and it's something i am doing wrong in my code !
Here is a plunker
Primitive variables (like boolean) are passed by value in Javascript, and the variables $scope.is_logged are just copies of their values in the service. So, if the original service value is changed, then this won't affect any copies on the scopes.
A standard way or re-factoring this would be to share an object between the controllers, and not a primitive, so
app.factory('UserService', function() {
return {
status: {
is_logged: false
}
};
});
And then used in the controllers
$scope.status = UserService.status;
So the controller can change $scope.status.is_logged, and the changes will be seen in all the controllers.
You can see this at:
http://plnkr.co/edit/GLZmdsAnn3T5Xw80h4sV?p=preview
When you assign is_logged to the scope on each controller you are creating a new property on each controller, both of which are initialised to the value from UserService.
In your case what you can do is expose the service on the scope of each controller like so:
$scope.data = UserService
and in your view:
<h1>{{data.is_logged}}</h1>
Have a look at this answer and the links that it mentions.

Resources