is it possible using multiple controllers on one controller in angularjs? - javascript

so let say I have a multiple controller
angular.module('myApp.controllers', []).
controller('MyCtrl1', ['$scope', function($scope) {
//define $scope.controller1 here
$scope.controller1 = "controller1";
}).
controller('MyCtrl1', ['$scope', function($scope) {
//define $scope.controller2 here
$scope.controller2 = "controller2";
}).
controller('MyCtrl3', ['$scope', function($scope) {
//I want to get the property of $scope.controller1 and
//$scope.controller2 here
});
as you can see above, for example I want to access $scope property from controller1 and controller2 from 3...
the question is, is angularjs capable of calling multiple controller on one controller ?

In AngularJS, scopes are inherited based on their position in the DOM. So if your html looked like:
<div ng-controller="my-ctrl1">
<div ng-controller="my-ctrl2">
<div ng-controller="my-ctrl3"></div>
</div>
</div>
Then $scope.controller1 would be accessible from MyCtrl1, MyCtrl2, and MyCtrl3, but $scope.controller2 would only be available from MyCtrl2 and MyCtrl3.
If you want to share data between controllers, then you should store that data in a service and inject the service into the controllers:
angular.module('myApp.controllers', []).
factory('MyData', function(){
var MyData= {};
return MyData;
}).
controller('MyCtrl1', ['$scope' 'MyData', function($scope, MyData) {
MyData.controller1 = "controller1";
}).
controller('MyCtrl2', ['$scope', 'MyData', function($scope, MyData) {
MyData.controller2 = "controller2";
}).
controller('MyCtrl3', ['$scope', 'MyData', function($scope, MyData) {
// Now you can access MyData.controller1 and MyData.controller2
});

Related

reference form in angular component without scope

Currently I have this component definition:
var controller = ['$http', '$timeout', '$scope', function($http, $timeout, $scope) {
this.isInvalid = function() {
return $scope.changePinForm.$invalid;
};
}];
var component = {
templateUrl: path.fromRoot('/application/libs/components/pin-change/view/pin-change.html'),
controller: controller,
controllerAs: 'vm'
};
angular.module('pin-change', ['confirm-reject', 'compare-validator', 'is-numeric'])
.component('pinChange', component);
});
Which references this html file via templateUrl:
<form name="changePinForm" class="form-horizontal">
<!-- etc. etc. -->
</form>
At the moment I am having to use scope to reference the form:
$scope.changePinForm.$invalid;
I would prefer to avoid scope and reference the form from the component's controller.
Is this possible or is scope still the only way?
You could make your form name to be name="vm.changePinForm" use vm(controller alias).
And then you can easily access vm.changePinForm.$invalid inside your controller. By which you aren't depending on $scope inside your controller.
var controller = ['$http', '$timeout',
function($http, $timeout) {
var vm = this;
vm.isInvalid = function() {
return vm.changePinForm.$invalid;
};
}
];

AngularJS: '$scope is not defined'

I keep getting '$scope is not defined' console errors for this controller code in AngularJS:
angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
function($scope, $routeParams, $location, Authentication, Articles){
$scope.authentication = Authentication;
}
]);
$scope.create = function() { // THROWS ERROR ON THIS INSTANCE OF $SCOPE
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
$location.path('articles/' + response._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
Where in my AngularJS MVC files should I be looking at to find problems with the $scope not being defined properly?
For others who land here from Google, you'll get this error if you forget the quotes around $scope when you're annotating the function for minification.
Error
app.controller('myCtrl', [$scope, function($scope) {
...
}]);
Happy Angular
app.controller('myCtrl', ['$scope', function($scope) {
...
}]);
Place that code inside controller:-
angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
function($scope, $routeParams, $location, Authentication, Articles){
$scope.authentication = Authentication;
$scope.create = function() { // THROWS ERROR ON THIS INSTANCE OF $SCOPE
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
$location.path('articles/' + response._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
Just put you $scope.create function inside your controller. Not outside !
$scope is only defined in controllers, each controller have its own. So write $scope outside your controller can't work.
Check scope variable declared after controller defined.
Eg:
var app = angular.module('myApp','');
app.controller('customersCtrl', function($scope, $http) {
//define scope variable here.
});
Check defined range of controller in view page.
Eg:
<div ng-controller="mycontroller">
//scope variable used inside these blocks
<div>

Angular factory undefined in controller

I am working on a very simple factory to be used inside an angular controller. The problem is that the factory doesn't seem to be getting picked up inside the controller. The console.log returns undefined and I can't seem to figure out why.
var app = angular.module('App', ['ngRoute', 'ngTouch']);
app.controller('AppController', [
'$scope',
'$rootScope',
'myFactory',
function($scope, $routeParams, myFactory) {
console.log(myFactory)
}]);
app.factory('myFactory', function() {
return 'test';
});
The problem is that your controller is is injecting $rootScope and then you change it to $routeParams in the function. Have a look at this fiddle http://jsfiddle.net/wkqajL2x/6/ where I have removed those two attributes. It then works fine.
var app = angular.module('App', []);
app.controller('AppController', [
'$scope',
'myFactory',
function($scope, myFactory) {
console.log(myFactory)
}]);
app.factory('myFactory', function() {
return 'test';
});
so you just need to decide which one out of those you really want to use.

Using Angular services to hold commonly required data

I am currently writing my first application in Angular and have been very much enjoying all the framework has to offer so far. Like most newbies I set off building everything into a main controller, copying the tutorials. I am now seeing the error of my ways and refactoring.
My question is about services holding data that is commonly required among controllers.
I've now taken the data out of the 'main controller' and placed it into a service that I have injected into both controllers requiring access. Now though neither controller sees the functionality I've defined in the new service:
varianceService is not defined
Being new to this approach i welcome all and any help, aswell as help with my current problem, any comments on the best way to apply this approach would also be highly appreciated.
Thanks in advance.
Here is an example of the code:
var app = angular.module(
'VarianceAnalysis', ['ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'mgcrea.ngStrap.tooltip', 'mgcrea.ngStrap.helpers.dateParser', 'SharedServices']
)
.service('varianceService', function () {
var variances = {};
return {
redirect: function (path) {
$location.path(path);
},
getHttpVariances: function (month1, month2) {
var url = "/Home/GetVariances?month_1=";
url += month1;
url += "&month_2="
url += month2;
url += "&forwardBilling=true"
$http.get(url).success(function (data) {
variances = data;
return data;
});
return {};
},
getVariances: function () {
return variances;
}
};
})
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/MainPage', {
templateUrl: 'mainpage.html',
controller: 'MainPageCtrl'
}).
when('/Variance/:type', {
templateUrl: 'variance.html',
controller: 'VarianceCtrl'
}).
otherwise({
redirectTo: '/MainPage'
});
}])
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', 'varianceService', function ($scope, $http, $location) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
The problems lies in the bracket notation of injecting services in your function..
What you inject in the bracket notation must also be present in the function definition..
e.g.
controller('MyCtrl', ['$scope', '$http', 'varianceService', function($scope, $http, varianceService) {
}]);
so in relation to your code above.. it should be like this..
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', '$http', '$location', 'varianceService', function ($scope, $http, $location, varianceService) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
just as how you have ordered the injected services in your bracket notation, it must also pertain the same order in your function definition.
Change this
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
to
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])

AngularJS: Load templateUrl after all data received by the controller

I'd like to display my template when the data coming from my server are loaded.
I created a module called Services with inside some services to load my data, I'm using HomeService for my example.
var app = angular.module('MyApp', ['Services']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'home.html',
controller: 'Home_Ctrl',
resolve: {
loadData: //??
}
});
}]);
app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
$scope.data = HomeService.getData();
}
I guess I need to create a promise to do that. Is it possible to put this function inside my controller?
I mean, I don't want something like that:
var ctrl = app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
//Do something
}
//Promise
ctrl.fct = function($q) {
}
I want something like that:
app.controller('Home_Ctrl', ['$scope', '$q', 'HomeService', function($scope, $q, HomeService) {
//Do something
//Promise
this.fct = function() {}
}
Any idea?
Thanks.
You could use resolve property of controller.
You could create a object which will return promise and assign to controller resolve function and inject the same in controller definition kindly see very simple example
$routeProvider.when('/ExitPoll', {
templateUrl: '/partials/ExitPoll.html', controller: exitpollController, resolve: {
responseData: ['$http', function ($http) {
return $http.get('/Candidate/GetExitPolls/hissar').then(function (response) {
return response.data;
});
}],
}
});
var exitpollController = ['$scope', '$http','responseData','$rootScope',
function ($scope, $http, responseData, $rootScope) {
}];

Categories