I want to access variable from another controller any body help
My code
app.controller('MapCtrl',function($scope, $state, $cordovaGeolocation) {
$scope.search_item = function($event,item){
console.log(item);
var lat = item.lat;
var lng = item.lng;
}
});
to
app.controller("homeCtrl", function($scope,$http, $filter ){
});
You can set up a service that 'shares' the variable between the two controllers.
Create a file: services.js in the app/ directory (where app.js is located)
angular.module('app.services', [])
.service('var_transfer_service', function(){
var test_var;
return {
getVar: function () {
return test_var;
},
setVar: function( _test_var ) {
test_var = _test_var;
}
}
})
Now inject this service into the controllers that need variable sharing:
app.controller('MapCtrl',function($scope, $state, $cordovaGeolocation, var_transfer_service) {
$scope.search_item = function($event,item){
console.log(item);
var lat = item.lat;
var lng = item.lng;
var_transfer_service.setVar(lat);
}
});
app.controller("homeCtrl", function($scope,$http, $filter, var_transfer_service ){
var transferred_var = var_transfer_service.getVar();
// transferred_var will now equal 'lat' from the other controller
});
You can further modify the function definitions in services.js and function calls in your controllers to accommodate more variables.
Make sure to also add the services.js module to your app:
angular.module('app', ['ionic', 'app.controllers', 'app.services'])
Related
I have two controllers and in one of them I declared a $scope variable that I would like visible in the second controller.
First controller
app.controller('Ctrl1', function ($scope) {
$scope.variable1 = "One";
});
Second Controller
app.controller('Ctrl2', function ($scope, share) {
console.log("shared variable " + share.getVariable());
});
I researched the best Angular approach and I found that is the use of service. So I added a service for Ctrl1
Service
.service('share', function ($scope) {
return {
getVariable: function () {
return $scope.variable1;
}
};
});
This code return this error:
Unknown provider: $scopeProvider <- $scope <- share
So my question is: is possible share $scope variable between controllers? Is not the best Angular solution or i'm missing something?
Sorry for my trivial question but I'm an Angular beginner.
Thanks in advance
Regards
Yes, it is possible to share the scope variables between controllers through services and factory.But, the $scope variables are local to the controller itself and there is no way for the service to know about that particular variable.I prefer using factory, easy and smooth as butter. If you are using the service of factory in a separate file you need to include the file in index.html
app.controller('Ctrl1', function ($scope,myService,$state) {
$scope.variable1 = "One";
myService.set($scope.variable1);
$state.go('app.thepagewhereyouwanttoshare');//go to the page where you want to share that variable.
});
app.controller('Ctrl2', function ($scope, myService) {
console.log("shared variable " + myService.get());
});
.factory('myService', function() {
function set(data) {
products = data;
}
function get() {
return products;
}
return {
set: set,
get: get
}
})
You cannot inject $scope dependency in service factory function.
Basically shareable service should maintain shareable data in some object.
Service
.service('share', function () {
var self = this;
//private shared variable
var sharedVariables = { };
self.getSharedVariables = getSharedVariables;
self.setVariable = setVariable;
//function declarations
function getSharedVariables() {
return sharedVariables;
}
function setVariable() {
sharedVariables[paramName] = value;
}
});
Controller
app.controller('Ctrl1', function ($scope, share) {
$scope.variable1 = "One";
share.setVariable('variable1', $scope.variable1); //setting value in service variable
});
app.controller('Ctrl2', function ($scope, share) {
console.log("shared variable " + share.getSharedVariables());
});
Your try with service it quite good, but you shouldn't try to use $scope in dependency injection into the service code. Service is meant to be a data provider to you, then if you want to share some data between 2 controllers, you should make place for this data in your service
.service('share', function ($scope) {
this.variable1 = '';
return {
getVariable: function () {
return this.variable1;
}
setVariable(variable)
{
this.variable1 = variable;
}
};
});
app.controller('Ctrl1', function (share) {
$scope.variable1 = share.getVariable();
});
This is the broader description of this solution:
https://stackoverflow.com/a/21920241/4772988
Best way is really using services. Services have only access to $rootScope, they don't have their own $scope.
However, you shouldn't use scopes for this task. Just make a service with some shared variable outside any scopes.
.service('share', function ($scope) {
var variable = 42;
return {
getVariable: function () {
return variable;
}
};
});
app.controller('Ctrl', function ($scope, share) {
console.log("shared variable " + share.getVariable());
// Watch for changes in the service property
$scope.$watch(function() { return share.getVariable(); }, function(oldValue, newValue) {
// whatever
});
});
First, your service should be like this:
app.service('share', function () {
// this is a private variable
var variable1;
return {
// this function get/sets the value of the private variable variable1
variable1: function (newValue) {
if(newValue) variable1 = newValue;
return variable1;
}
};
});
To set the value of the shared variable pass the value to the function we created on the service
app.controller('Ctrl1', function ($scope, share) {
$scope.variable1 = "One";
// share the value of $scope.variable1
share.variable1($scope.variable1);
});
To get the value of the shared variable also use the function in the service without passing a value
app.controller('Ctrl2', function ($scope, share) {
console.log("shared variable " + share.variable1());
});
Update: Using $rootScope is considered bad practice.
What you need is the $rootScope. The $scope is just for one controller. Here is an example:
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
})
.controller('myCtrl2', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.changeRs = function() {
$rootScope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
});
Let's say I have a predefined module/controller which sets the apple as green.
var _core = angular.module('_core', []);
_core.controller('mainController', function($scope, $controller, $http) {
$scope.apple = 'green';
});
Can I get the apple outside of the controller? Something like.
_core.mainController.apple
Is this possible? I also need to set variables with external plugins, sorry I'm a complete angular noob, its a bit daunting.
If you want the value to be accessible outside the controller, then you can store it in $rootScope instead of $scope and you can directly use the values stored in $rootScope where it is injectable. So the code becomes:
var _core = angular.module('_core', []);
_core.controller('mainController', function($scope, $controller, $http, $rootScope) {
$rootScope.apple = 'green';
});
Now in some other place say a factory, you can use it as:
var _core1 = angular.module('_core1', []);
_core1.factory('someFactory', function($scope, $rootScope, $http) {
var fruit = $rootScope.apple;
//variable fruit now contains green
});
You can use factory to get set any module outside the controller.
var App = angular.module('app', []);
App.factory('messages', function () {
var messages = {};
messages.list = [];
messages.add = function (someString) {
messages.list.push(someString);
};
messages.get = function() {
};
messages.clearList = function () {
messages.list.length = 0;
}
return messages;
});
And you can call this service method into your controller.
App.Controller('myController',['$scope', 'messages', function(scope, messages) {
messages.add('Hello');
var myListy = messages.get();
}]);
I'm fairly new to the AngularJS framework, but basically what I am trying to do is inject a CSRF token into my app, but I want to change the url based on a config. Here is what I have so far:
var VERISION_API = 'v1';
var config_data = {
'CFG': {
'EP': 'https://mydomain.com/api/' + VERISION_API + '/web/'
}
};
var configMod = angular.module("cfg",[]);
angular.forEach(config_data,function(key,value) {
configMod.constant(value,key);
});
var myApp = angular.module("app", ["cfg", "ngResource", "ngRoute"]);
(function () {
var $injector = angular.injector(['ng']);
$injector.invoke(['cfg', '$http', '$rootScope', function (cfg, $http, $rootScope) {
$rootScope.$apply(function (CFG) {
$http.get(CFG.EP + "accounts/csrf").then(function (response) {
myApp.constant("CSRF_TOKEN", response.csrf_token);
angular.bootstrap(document, ['app']);
});
});
}]);
})();
I keep getting the following error:
Uncaught Error: [$injector:unpr] Unknown provider: cfgProvider <- cfg
I know it has something to do with the way that I am running the $injector.invoke, but I have tried everything. Hopefully someone could help me out and tell me what I am doing wrong?
Couple of issues, See inline:-
var $injector = angular.injector(['ng', 'cfg']); //<-- Add module name here
/*Injection is case sensitive it mustbe CFG*/
$injector.invoke(['CFG', '$http', '$rootScope', function (cfg, $http, $rootScope) {
$rootScope.$apply(function () { //Do not set an argument here
$http.get(cfg.EP + "accounts/csrf").then(function (response) {
myApp.constant("CSRF_TOKEN", response.csrf_token);
angular.bootstrap(document, ['app']);
});
});
}]);
1) You need to get the injector with the module that has the dependency, example:
var $injector = angular.injector(['ng', 'cfg']);
2) DI service/provider/etc.. names are case sensitive so:
$injector.invoke(['CFG',...
3) Do not pass an argument in the anonymous function of $rootScope.$apply it will create a local variable within that scope. So just:
$rootScope.$apply(function () {
injected dependency is available as variable (argument cfg) from the upper scope, so just access it as:
$http.get(cfg.EP + "accounts/csrf");
Check the network console in the demo:
var configMod = angular.module("cfg", []);
var config_data = {
'CFG': {
'EP': 'https://mydomain.com/api//web/'
}
};
var configMod = angular.module("cfg", []);
angular.forEach(config_data, function(key, value) {
configMod.constant(value, key);
});
var myApp = angular.module("app", ["cfg", "ngResource", "ngRoute"]);
(function() {
var $injector = angular.injector(['ng', 'cfg']); //<-- Add module name here
/*Injection is case sensitive it mustbe CFG*/
$injector.invoke(['CFG', '$http', '$rootScope',
function(cfg, $http, $rootScope) {
$rootScope.$apply(function() { //Do not set an argument here
$http.get(cfg.EP + "accounts/csrf").then(function(response) {
myApp.constant("CSRF_TOKEN", response.csrf_token);
angular.bootstrap(document, ['app']);
});
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
angular gets service from providerCache by exact the string key case sensitive, so CFG should be used
i have some module defined and services too with that module like below
var services=angular.module('app.services', []);
services.factory('ApiService', function($http,$cookies,UserService){
var dataFactory = {};
dataFactory.request=function(url,data,next){
return "Hi";
};
return dataFactory;
});
now in another script i can access module like
services=angular.module('app.services')
but how can i get service instance from that module like
apiService=angular.module('app.services').service('ApiService')
Edit:
after reading and understanding the author's comments, he was actually meant to block the entire app if the user is not permitted. his desired to do it by reusing the same code written in his ApiService factory.
--
You can 'hook' to app.run function which called before your controllers and you can utilize $window.location.href to relocate user to another page or site (if not permitted)
Iv'e updated this plunker with app.run entry
app.js
var app = angular.module('app', ['app.services']);
app.run(function(ApiService, $window) {
result = ApiService.request();
// This is where you check your permissions
var has_permissions = false;
// ...
if (!has_permissions) {
alert('being transferred to plnkr.co due to lack of permissions');
$window.location.href = 'http://plnkr.co/';
}
// Otherwise, continue normally
});
Original:
i made this plunker
if you separate all logic to api.services module, include it in your app
app.js
var app = angular.module('app', ['app.services']);
then you could use it by referencing the desired factory - ApiService
app.controller('myCtrl', ['$scope', 'ApiService',
function($scope, ApiService) {
$scope.result = ApiService.request();
}
]);
app.services.js
var services = angular.module('app.services', []);
services.factory('UserService', function() {
var UserService = {};
UserService.foo = function() {
return "foo";
};
return UserService;
});
services.factory('ApiService', function($http, UserService) {
var ApiService = {};
ApiService.request = function(url, data, next) {
return UserService.foo() + " Hi";
};
return ApiService;
});
plunker
Let's take the example from AngularJS tutorial
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
//PhoneListCtrl.$inject = ['$scope', '$http'];
Now, lets say I don't want to hard code the url 'phones/phones.json' and would prefer the page which hosts this controller to inject it, what should be the right way of doing the same in Angular JS?
There are a lot of ways to do this... the simplest way would just be to use $window, so you'd inject the $window service, and that's basically just the global $window that's been injected. Then you can register those paths as window.path = 'whatever.json'; and you'll be fine:
window.path = 'some/path.json';
function PhoneListCtrl($scope, $http, $window) {
$http.get($window.path).success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
A more advanced way would be to create a module with a service that you inject into your app, in this case each page would have it's own module:
//create your module.
angular.module('configData', [])
.factory('pathService', function () {
return {
path: 'some/path.json'
};
});
//then inject it into your app
var app = angular.module('myApp', ['configData']);
app.controller('PhoneListCtrl', function($scope, $http, pathService) {
$http.get(pathService.path).success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
});
You can, of course, do anything in between the two. I would suggest taking the path that is the most maintainable while still easy to test.