Hi I need to use a variable from the result scope of one controller to another controller. I can achieve this by using nested controller but in my case my controller 2 is not a child of controller 1. I somehow able to achieve my output with the following controller but still i want to know is this best practice if not how can i pass variables between various controllers.
angular.module('test',[])
.factory('PassParameter', PassParameter)
function PassParameter(){
var thisValue = {};
return {
getParameter: function () {
return thisValue;
},
setParameter: function (setValue) {
_.extend(thisValue, setValue);
},
removeParameter : function(value) {
_.omit(thisValue, value);
}
};
};
i Pass an object to setParameter function and get by its value from getParameter function.
this is the way that I'm passing info between controllers.
*Note that I'm using angular.copy so I won't lose reference, this way when "obj" is changed, you don't need to get it again.(works only on objects {})
angular.module('test').service('mySrv',
function () {
var obj = {};
this.getObj = function(){
return obj;
};
this.setObj = function(obj){
obj = angular.copy(obj);
};
});
Related
I have 2 components which are both accessing a service. One component delivers an object and the other one is supposed to display it or just receive it. The problem is that after the initialization process is finished the variable in the display component doesn't change.
I have tried using $scope , $scope.$apply(), this.$onChanges aswell as $scope.$watch to keep track of the variable, but it always stays the same.
This controller from the display component provides a text, which is from an input field, in an object.
app.controller("Test2Controller", function ($log, TestService) {
this.click = function () {
let that = this;
TestService.changeText({"text": that.text});
}
});
That is the the service, which gets the objekt and saves it into this.currentText.
app.service("TestService", function ($log) {
this.currentText = {};
this.changeText = function (obj) {
this.currentText = obj;
$log.debug(this.currentText);
};
this.getCurrentText = function () {
return this.currentText;
};
});
This is the controller which is supposed to then display the object, but even fails to update the this.text variable.
app.controller("TestController", function (TestService, $timeout, $log) {
let that = this;
this.$onInit = function () {
this.text = TestService.getCurrentText();
//debugging
this.update();
};
//debugging
this.update = function() {
$timeout(function () {
$log.debug(that.text);
that.update();
}, 1000);
}
//debugging
this.$onChanges = function (obj) {
$log.debug(obj);
}
});
I spent quite some time searching for an answer, but most are related to directives or didn't work in my case, such as one solution to put the object into another object. I figured that I could use $broadcast and $on but I have heard to avoid using it. The angular version I am using is: 1.6.9
I see a problem with your approach. You're trying to share the single reference of an object. You want to share object reference once and want to reflect it wherever it has been used. But as per changeText method, you're setting up new reference to currentText service property which is wrong.
Rather I'd suggest you just use single reference of an object throughout and it will take care of sharing object between multiple controllers.
Service
app.service("TestService", function ($log) {
var currentText = {}; // private variable
// Passing text property explicitly, and changing that property only
this.changeText = function (text) {
currentText.text = text; // updating property, not changing reference of an object
$log.debug(currentText);
};
this.getCurrentText = function () {
return currentText;
};
});
Now from changeText method just pass on text that needs to be changed to, not an new object.
I need to execute functions of some controllers when my application ends (e.g. when closing the navigator tab) so I've thought in a service to manage the list of those functions and call them when needed. These functions changes depending on the controllers I have opened.
Here's some code
Controller 1
angular.module('myApp').component('myComponent', {
controller: function ($scope) {
var mc = this;
mc.saveData = function(objectToSave){
...
};
}
});
Controller 2
angular.module('myApp').component('anotherComponent', {
controller: function ($scope) {
var ac = this;
ac.printData = function(objects, priority){
...
};
}
});
How to store those functions (saveData & printData) considering they have different parameters, so when I need it, I can call them (myComponent.saveData & anotherComponent.printData).
The above code is not general controller but the angular1.5+ component with its own controller scope. So the methods saveData and printData can only be accessed in respective component HTML template.
So to utilise the above method anywhere in application, they should be part of some service\factory and that needs to be injected wherever you may required.
You can create service like :
angular.module('FTWApp').service('someService', function() {
this.saveData = function (objectToSave) {
// saveData method code
};
this.printData = function (objects, priority) {
// printData method code
};
});
and inject it wherever you need, like in your component:
controller: function(someService) {
// define method parameter data
someService.saveData(objectToSave);
someService.printData (objects, priority);
}
I managed to make this, creating a service for managing the methods that will be fired.
angular.module('FTWApp').service('myService',function(){
var ac = this;
ac.addMethodForOnClose = addMethodForOnClose;
ac.arrMethods = [];
function addMethodForOnClose(idModule, method){
ac.arrMethods[idModule] = {
id: idModule,
method: method
}
};
function executeMethodsOnClose(){
for(object in ac.arrayMethods){
ac.arrMethods[object].method();
}
});
Then in the controllers, just add the method needed to that array:
myService.addMethodForOnClose(id, vm.methodToLaunchOnClose);
Afterwards, capture the $window.onunload and run myService.executeMethodsOnClose()
I wrote an Angular factory to store an object that I need to pass to diferent controllers. The factory looks like this:
app.factory('SearchEngineConfigs', function () {
var configs = {
isInternational: false,
TripType: 1,
journeys: []
}
var _setInternational = function(val) {
configs.isInternational = val;
}
var _setTripType = function(val) {
configs.TripType = val;
}
var _setJourneys = function(journeys) {
configs.journeys = journeys;
}
var _getConfigs = function() {
return configs;
}
return {
setInternatioanl: _setInternational,
setTripType: _setTripType,
setJourneys: _setJourneys,
getConfigs: _getConfigs
}
});
So I have this factory injected in my controllers. In one of the controllers I'm setting the values of configs' factory like this:
SearchEngineConfigs.setInternatioanl($scope.searchEngine.isInternational);
SearchEngineConfigs.setTripType($scope.searchEngine.TripType);
SearchEngineConfigs.setJourneys($scope.journeys.slice());
So far so good. What is happening now is that everytime I change let's say the $scope.searchEngine.isInternational without calling the factory method SearchEngineConfigs.setInternatioanl this change still being reflected into the factory and thus, updating this property in another controller that is using that factory at the same time of the first controller. How can I avoid this to happen? I only want to change the value of the object inside the factory when I explicity make a call to the correponding factory method.
You could use angular.copy to avoid allowing any references to your internal state objects for existing outside your factory.
Note that you could have to do this on both the input and output, as either could create a leak.
One way of ensuring this was consistant would be to use a decorator function:
function decorate(func) {
return function() {
const argumentsCopy = _.map(arguments, a => angular.copy(a));
const result = func.apply(factory, argumentsCopy);
return angular.copy(result);
};
}
...which in turn is used like this:
var factory = {
setInternatioanl: decorate(_setInternational),
setTripType: decorate(_setTripType),
setJourneys: decorate(_setJourneys),
getConfigs: decorate(_getConfigs)
}
return factory
You can either use the new keyword to have different instances of the service.
Something like, var searchEngineConfigs = new SearchEngineConfigs(); and then use it to invoke factory methods.
Or, you can use the angular.copy() while setting the variables in your service to remove the reference which is causing the update in service.
Something like,
var _setInternational = function(val) {
configs.isInternational = angular.copy(val);
}
I want automatically refresh $scope.variable in both controllers to new value if data.variable in SharedFactory was changed:
.controller('FirstController', function($scope, SharedFactory) {
$scope.variable = SharedFactory.getVal();
})
.controller('SecondController', function($scope, SharedFactory) {
$scope.variable = SharedFactory.getVal();
SharedFactory.setVal("test string 2");
})
.factory("SharedFactory", function () {
var data = { // all variables by default
variable : 'test string'
};
return {
getVal: function () {
return data.variable
},
setVal: function (i) {
data.variable = i;
}
}
});
http://plnkr.co/edit/b1RNcl6Pz2iuRr2t2Q9x?p=preview
So at this example correct result must be "test string 2" in both controllers. How to do that?
Easiest (and possibly more efficient) would be to have a reference to SharedFactory.data directly in your controllers - rather than to SharedFactory.data.variable. That way, when the value of data.variable changes it would change in all controllers as you reference the data-variable rather than the specific value. Using primitives is generally not reccomended.
Another solution would be to use $scope.$watch in your controllers, and just watch for changes on the value and update the local-variable when it changes.
Because you are using primitive variable instead of using object so once you set it you actually lose your reference to original object, so instead of returning data object value (which is primitive) you can return all data object...
getVal: function () {
return data;
}
Here is update plunker...
So I have a directive that takes in data objects as an argument into the scope. The problem is that I handle all my data in my service layer.
So this is some normal non-directive code:
angular.module('app').factory('appFactory', ['appValues', function(appValues) {
var getStuff = function() { return appValues.stuff; };
}]);
But if want to reuse the factory inside a directive and get appValues as an argument:
angular.module('app').directive('myDir', [function() {
return {
...
scope: {
values: '='
}
....
};
}]);
But this puts it on the scope and not into my data layer. So now I need to send the values object to every function call in my directive factory:
angular.module('app').factory('myDirFactory', [function() {
var getStuff = function(values) { return values.stuff; };
}]);
Is there any good pattern to solve this and keep data in the data-layer and bypass the scope/controller?
Also, the factory will be a singleton shared amongst instances of the directive? How should I solve that then? Create a new injector somehow? Submit to putting lots of data object logic into the controller (which I've been thought not to do)?
It was a while ago, and I guess that a simple soultion is simply to provide an function initialize(value) {... return {...};} and then the returned object has access to the value argument without providing it as a parameter everywhere:
angular.module('myDir').factory('myDirFactory', [function() {
var initialize = function(values) {
var getStuff = function() {
return values;
};
return {
getStuff: getstuff;
};
};
return {
initialize: initialize
};
}]);