unified.controller('YourteamController', function uniYourteamController($scope) {
testController.listTeams();
});
unified.controller('testController', function testController($scope) {
$scope.listTeams = function() {
//Listing process
};
});
I have two controller. I need to call a function(listTeams()) in another controller(testController). How to call this using angularjs
Go the service way. Easier to test, and more in line with 'best practices'.
angular.module('sharedService', function () {
function listTeams () {
return 'teams!';
}
angular.extend(this, {
listTeams: listTeams
})
});
angular.module('ctrl1', function ($scope, sharedService) {
angular.extend($scope, {
listTeams: sharedService.listTeams
});
});
angular.module('ctrl2', function ($scope, sharedService) {
angular.extend($scope, {
listTeams: sharedService.listTeams
});
});
You need to inject first controller as dependency to second controller. Here is how to do it.
do the following ...
unified.controller('YourteamController', function uniYourteamController($scope) {
var testController= $scope.$new();
$controller('testController',{$scope : testCtrl1ViewModel });
testController.listTeams();
});
unified.controller('testController', function($scope) {
$scope.listTeams = function() {
//Listing process
};
});
you have to make a service that will return a function that can be used in both controllers having diffrent scope.
========================================
unified.controller('YourteamController', function uniYourteamController($scope, $abc) {
$abc.listTeams();
});
unified.controller('testController', function testController($scope, $abc) {
$abc.listTeams();
});
unified.service('abc', function () {
this.listitems = function () {
}
});
Just try this
unified.controller('YourteamController', function uniYourteamController($scope) {
$scope.$parent.listTeams();
});
Related
I am writing the UT for controller and while trying to implement for commandRouter.execute method(please refer 2nd spec) , I am getting error message : can not read property 'execute' of undefined.
Can someone let me know what am i doing wrong here and whats the correct way to spy on a method from controller. ?
module.controller('DcsPlus.AP.OmsControl.omsMasterRecipeDialogPopUpController', omsMasterRecipeDialogPopUpController);
omsMasterRecipeDialogPopUpController.$inject = [
'DcsPlus.Frame.Logic.commandRouter'
];
function omsMasterRecipeDialogPopUpController(commandRouter) {
var vm = this;
vm.execute = function(command) {
commandRouter.execute(command);
};
}
controller.spec.js
describe('omsMasterRecipeDialogPopUpController', function () {
var omsMasterRecipeDialogPopUpControllerTest;
var commandRouterMock;
var $scope;
beforeEach(function () {
registerMockServices();
prepareCommandRouterMock();
});
describe('execute', function () {
it('1. Should check if execute method is defined', function() {
expect(omsMasterRecipeDialogPopUpControllerTest.execute).toBeDefined();
});
it('2. Should check if execute method of commandRouter is called', function() {
omsMasterRecipeDialogPopUpControllerTest.execute();
expect(commandRouterMock.execute).toHaveBeenCalled();
});
});
function prepareCommandRouterMock() {
commandRouterMock = {
execute: function() {
}
};
}
/*beforeEach(function () {
commandRouterMock = jasmine.createSpyObj('DcsPlus.Frame.Logic.commandRouter', ['execute']);
});*/
function registerMockServices() {
angular.mock.module('DcsPlus.AP.OmsControl', function ($provide) {
$provide.value('DcsPlus.Frame.Logic.commandRouter', commandRouterMock);
});
angular.mock.inject(['$controller', '$rootScope', 'dialogService',
function ($controller, $rootScope, dialogService) {
$scope = $rootScope.$new();
spyOn(commandRouterMock, 'execute').and.callThrough();
// Init the controller, passing our spy service instance
omsMasterRecipeDialogPopUpControllerTest = $controller('DcsPlus.AP.OmsControl.omsMasterRecipeDialogPopUpController', {
$scope: $scope
});
}]);
}
});
In the beginning you create commandRouterMock but never assign it to anything.
Try this:
beforeEach(function () {
registerMockServices();
commandRouterMock = prepareCommandRouterMock();
});
function prepareCommandRouterMock() {
return {
execute: function() {
}
};
}
In the below, I have a sidenav and a main content section. I am trying to call the sidenav function from the main controller so the number updtes in the sidenav. What am I doing wrong here?
This is my view.
<div>Teams {{ teams.length }} </div>
This is my sidebar controller:
angular.module('myApp').controller('leftNav', function($scope, myFactory) {
myFactory.getTeams().then(function(res) {
$scope.teams = res.data;
})
This is my factory
angular.module('myApp').factory('myFactory', function($http) {
return {
getTeams : function() {
return $http.get('/teams').then(function(res) {
return res;
});
}
};
});
This is a complete different controller:
angular.module('myApp').controller('main', function($scope,$http, myFactory) {
$http.post(...blablabl..).then(function() {
// What can i call here to update the sidenav above?
});
});
You can utilise $controller service to call your leftNav controller from your main controller like below
angular.module('myApp').controller('main', function($scope,$http, myFactory,$controller) {
$http.post(...blablabl..).then(function() {
var leftCTRL= $controller('leftNav', { $scope: $scope.$new() });
});
});
you can try like so :
angular.module('myApp').controller('leftNav', function($scope, myFactory) {
myFactory.getTeams().then(function(res) {
this.teams = res.data;
})
angular.module('myApp').controller('main', function($scope,$http, $controller) {
var leftNav= $controller('leftNav');
$http.post(...blablabl..).then(function(res) {
leftNav.teams = res.data;
});
});
I have a problem when trying to call a variable outside a function
This is the service
app.factory('Service', function($http) {
return {
agentes: function () {
return $http.get(base_url +'/api/auth/organization/me/tasks/calendar').then(function (response) {
return response.data;
});
}
};});
within the controller I call:
loadAgents();
function loadAgents() {
Service.agentes()
.then(function(agentes){
$scope.agentes = agentes.data.trackables;
});
}
within the above function I can use $scope.agentes but not outside it ...
I dont understand exactly what is your problem but you have some "mistakes" in your code.You should do
app.factory('Service', function($http) {
return {
agentes: function () {
return $http.get(base_url +'/api/auth/organization/me/tasks/calendar');
}
}
});
Then inside your controller
app.controller('myController', ['Service', function(Service) {
function loadAgents() {
Service.agentes()
.then(function(agentes){
$scope.agentes = agentes.data.trackables;
});
}
}])
I have defined a function within my controller, which i want to call in a module. How is this possible?
The controller:
var App = angular.module('App',['ngResource','App.filters']);
App.controller('ExerciseCtrl', ['$scope','$http', function($scope, $http) {
$scope.toggleOn = function (arr, id) {
// Some code
};
}]);
And the module:
angular.module('App.filters', []).filter('someFilter', [function () {
return function () {
someArray = [];
toggleOn(someArray, 1); // Wish to call this function
};
}]);
I want to call toggleOn within the module.
Off the top of my head, maybe something like this:
var App = angular.module('App',['ngResource','App.filters']);
App.service('toggleService', function(){
var service = {
toggleOn: function(arr, id){
}
};
return service;
});
App.controller('ExerciseCtrl', ['$scope','$http', 'toggleService', function($scope, $http, toggleService) {
$scope.toggleOn = toggleService.toggleOn;
}]);
angular.module('App.filters', []).filter('someFilter', ['toggleService', function (toggleService) {
return function () {
someArray = [];
toggleService.toggleOn(someArray, 1); // Wish to call this function
};
}]);
angular.module('App.filters', []).filter('someFilter', [function () {
return function (scope) {
someArray = [];
scope.toggleOn(someArray, 1); // Wish to call this function
};
}]);
And pass scope to filter
<span ng-controller="ExerciseCtrl">{{someFilter | this}}</span>
I tried to create a method in the services.js :
var esServices= angular.module('esServices', []);
esServices.factory('boxItems', ['$http', function($http) {
................
}]);
esServices.factory('cartItems', ['$cookieStore', function($cookieStore) {
array = $cookieStore.get('key');
var cartItems = new function(){},
cartItems.addItem = function(itemSelected){
$cookieStore.put('key', []);
array.push(itemSelected);
$cookieStore.put('key', array);
}
}]);
in my controllers I call the service method:
esControllers.controller('esList', ['$scope','cartItems','$cookieStore',
function($scope,cartItems,$cookieStore) {
cartItems.addItem($scope.element,function(){});
};
}]);
(itemSelected is an object)
Do you Know if it is possible to pass values (objects) from Controller to Service Method in this way?
Somebody can help me!!!
esServices.factory('cartItems', ['$cookieStore', function($cookieStore) {
return {
addItem: function(itemSelected){
var array = $cookieStore.get('key');
array.push(itemSelected);
$cookieStore.put('key', array);
},
removeItem: function(){
//...
}
}
}]);
then call using
cartItems.addItem(itemSelected);
You should inject the service in the controller like
var app = angular.module('app', ['ngCookies'] );
app.factory('cartItems', ['$cookieStore', function($cookieStore) {
return {
addItems : function(){
alert('hello');
}
}
}]);
app.controller('MyController',function($scope,cartItems){
$scope.test = 'my test';
cartItems.addItems();
});
If you want to use your ugly syntax :) just return cartItems from your factory