We Keep Coding

Share data from parent to child state with Angular UI-router

Based on this tutorial, I have as my parent state a list of people. When I click on one of them, a new view is created in order to show the details for that person. In my URL I use the ID for that person, so it's rather easy to go and fetch the ID to be used in the child state. The problem is that I also want to pass information such as the name, e-mail, age, etc.
The code is as follows:
My routes:
angular
.module('appRoutes', ["ui.router"])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
var TalentForceState_seeProfile = {
name: 'students',
url: '/seeProfile',
templateUrl: 'public/templates/talentforce_template.html',
controller: 'People_Controller'
}
var singleStudent = {
name: 'student',
parent: 'students',
url: '/:personId',
templateUrl: 'public/templates/person_template.html',
controller: 'Person_Controller'
}
....
Then, the controller for People:
talentforceApp
.controller('People_Controller', ['$scope', '$state', '$stateParams', 'StudentService', function($scope, $state, $stateParams, StudentService) {
StudentService.query().$promise.then(function(data) {
$scope.students = data;
});
}]);
Then, the controller for Person:
talentforceApp
.controller('Person_Controller', ['$scope', '$state', '$stateParams', 'StudentService', function($scope, $state, $stateParams, StudentService) {
$scope.student_id = $stateParams.personId;
console.log($stateParams)
}]);
Also, here's the HTML for the Person:
<div ng-controller="Person_Controller">
<h3>A person!</h3>
<div>Name: {{student_name}}</div>
<div>Id: {{student_id}}</div>
<button ui-sref="students">Close</button>
</div>
Information such as student_name is what I can't seem to pass from the parent state
I tried using solutions like this, that use $state.go, or this, that use params, but it always gives me errors such as param values not valid for state or the variables are undefined.
Any solution for this problem?

You can use angular's state resolve to achieve your requirement in a better way. Although there are many choices for it.
Procedure:
When your parent state loads, you query all the people in an API call.
In that response, I am assigning the response to an instance of a service using studentService.addStudents($scope.students); where addStudents is a function in the service.
Now, when you navigate to the detail of a person, I have used resolve which fetches the stored data from the service using the function studentService.getStudents() and returns a person object to the controller.
Use that person object directly in the person controller by injecting the resolve variable
I prefer using resolve. I will tell you why.
Here is the resolve you can use:
resolve: {
student: function(studentService, $stateParams) {
return studentService.getStudents().find(function(student) {
return student.id === $stateParams.personId;
});
}
}
You will add a service studentService or you can extend your own service.
Service:
talentforceApp.service('studentService', function(){
vm = this;
vm.students = []
this.addStudents = function(students) {
vm.students = students;
}
this.getStudents = function() {
return vm.students;
}
});
I added addStudents and getStudents methods to it.
One method add students to array and the other get the data of a studenr.
People Controller revised:
talentforceApp
.controller('People_Controller', ['$scope', '$state', '$stateParams', 'StudentService', function($scope, $state, $stateParams, StudentService,studentService) {
StudentService.query().$promise.then(function(data) {
$scope.students = data;
studentService.addStudents($scope.students); // this will create a students array in service instance
});
}]);
I assigned $scope.students to the service instance.
routes revised:
var TalentForceState_seeProfile = {
name: 'students',
url: '/seeProfile',
templateUrl: 'public/templates/talentforce_template.html',
controller: 'People_Controller'
}
var singleStudent = {
name: 'student',
parent: 'students',
url: '/:personId',
templateUrl: 'public/templates/person_template.html',
controller: 'Person_Controller',
resolve: {
student: function(studentService, $stateParams) {
return studentService.getStudents.find(function(student) {
return student.id === $stateParams.personId;
});
}
}
}
Now, you can use student from resolve into your controller, as a dependency.
person controller revised:
talentforceApp
.controller('Person_Controller', ['$scope', '$state', '$stateParams', 'StudentService',student, function($scope, $state, $stateParams, StudentService,student) {
$scope.student_id = $stateParams.personId;
console.log($stateParams)
$scope.student = student // this line add student to scope
console.log($scope.student)
}]);
Check your student object in the view:
View:
<div ng-controller="Person_Controller">
<h3>A person!</h3>
{{student}}
<div>Name: {{student_name}}</div>
<div>Id: {{student_id}}</div>
<button ui-sref="students">Close</button>
</div>
here is why I prefer to use resolve and its advantages

You can't pass a large object with nested properties with $state.go. You can use event: broadcast, emit. Creating a service that hold and share data to your controllers is a better way.

Ionic/Angularjs change controller to a global Variable

Here is my controller:
(function () {
var app= angular.module('app');
app.controller('recommendedJobsCtrl', ['$scope', function(dataShare,$q,$scope, $ionicSideMenuDelegate,$window,$http,$timeout) {
// passes contents to jobDetails to be rendered and displayed
window.post = function($event, res){
console.log(angular.element($event.target).parent());
dataShare.sendData(res)
}
/**
* handles pagination
*loads first 3 pages
**/
var i=1;
window.result=[];
window.noMoreItemsAvailable=false;
window.loadMore = function()
{
console.log('here')
if(i<4)
{
$http.get( "http://test.website.com/api/search/"+i).success(function(response)
{
i++;
$scope.result=$scope.result.push(response);
console.log(response);
$timeout(function ()
{
$scope.result = response
});
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}else
{
$scope.noMoreItemsAvailable=true;
}
}
]);
}());
I read that my controller was under 'user strict' so it can't access the variables or functions. So I placed the word 'window' to make it global. But now it doesn't access the function because the console won't print. How do I fix this?

Dependency Injection is incorrect:
app.controller('recommendedJobsCtrl', [
'dataShare',
'$q',
'$scope',
'$ionicSideMenuDelegate',
'$window',
'$http',
'$timeout',
function(
dataShare,
$q,
$scope,
$ionicSideMenuDelegate,
$window,
$http,
$timeout) {
// Your code ...
}]);
Your code should be specific to the controller. You should create function and variables either on $scope as in $scope.<functionName> = function() {} and $scope.noMoreItemsAvailable or private to the controller as in function <functionName>() {} or var noMoreItemsAvailable.
In case intention behind using window object is to use same code across controllers, you may put this code in a factory.

Angular directive controller: Argument is not a function, got undefined

I have created a directive inside my controller, which i want to include another controller to the directive. The error i get back is Error: [ng:areq] Argument 'js/controllers/testview/DocumentController.js' is not a function, got undefined
TestviewController
app.controller('TestviewController', ['$http', '$scope', '$sessionStorage', '$state', '$log', 'Session', 'api', function ($http, $scope, $sessionStorage, $state, $log, Session, api) {
var module_id = $state.params.id;
$http.get(api.getUrl('componentsByModule', module_id))
.success(function (response) {
$scope.components = response;
});
}]);
app.directive('viewDoc', function () {
return {
templateUrl: "tpl/directives/testview/document.html",
controller: "js/controllers/testview/DocumentController.js",
resolve: { components: function() { return $scope.components }}
};
});
DocumentController
app.controller('DocumentController', ['$http', '$scope', '$sessionStorage', '$state', '$log', 'Session', 'api', 'components', function ($http, $scope, $sessionStorage, $state, $log, Session, api, components) {
$scope.components = components;
}]);
I'm pretty new with directices, but does anyone have any idea what I'm doing wrong?

Inside the directive definition object, the controller property expects a string with the function name, or the function itself (not the path to script file).
app.directive('viewDoc', function () {
return {
...
controller: "DocumentController",
};
});

You want to call the controller by name, not by file name:
controller: "js/controllers/testview/DocumentController.js"
should be
controller: "DocumentController"

There is no option to put controller by its URL in the directive definition. However if you define your controller in DOM template you could use controller: 'myController as myCtrl' in directive definition

are you sure you need a directive controller? i think what you are trying to achieve is link function.
you can use directive link functions like controllers.
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});
take a look at angular docs
https://docs.angularjs.org/guide/directive

How to reference array returned by Angular Service, in order to maintain state?

I have a master object called "categories", which is returned by the DataService, and called by many different Controllers.
.service('DataService', ['$http', '$q', '$timeout', function($http, $q, $timeout) {
var categories = {};
// Return public API.
return({
setCategory: setCategory,
getCategory: getCategory
});
function setCategory(activities, details) {
var name = details.shortName,
category = {};
category.activities = activities;
category.details = details;
categories[name] = category;
}
function getCategory(name) {
return categories[name];
}
What is the correct way to access categories from the controllers in order to maintain state between all controllers?
For example, in Controller1 I want to grab the categories object property that matches name, and then add new values to an activity contained in it:
$scope.category = getCategory(name);
$scope.category.activities[2].input = true;
I then want to be able to access the value of category.activities[2].input everywhere that uses the getCategories service. But as far as I can tell this won't work because I've reassigned categories[name] to $scope.category, right?
Or, am I wrong, or taking entirely the wrong approach? What is the best way to call objects from the categories object, in a way that will allow me to preserve state across all controllers?

Please do not use $broadcast. Use $watch
.value('categories',{})
.service("myService",function(categories,$rootScope) {
$rootScope.$watch(function(){
return categories;
},function(val){
console.log("Some controller, any controller, has updated categories!");
},true);
})

As a suggestion, you can call the DataService.setCategory each time a controller makes a change. Then you can use $broadcast to send a message that the service has been changed, and use $on to subscribe and trigger a refresh of the 'getCategory' method so you have the latest model in each of the controllers.
For example, in your service:
.service('DataService', ['$rootScope', '$http', '$q', '$timeout', function($rootScope, $http, $q, $timeout) {
function setCategory(activities, details) {
var name = details.shortName,
category = {};
category.activities = activities;
category.details = details;
categories[name] = category;
$rootScope.$broadcast('categories:updated');
}
And in the controllers:
.controller('ControllerOne', ['$scope', '$rootScope', 'DataService', function($scope, $rootScope, DataService) {
$scope.category = DataService.getService(name);
$scope.category.activities[2].input = true;
DataService.setCategory(category.activities, category.details);
}])
.controller('ControllerTwo', ['$scope', '$rootScope', 'DataService', function($scope, $rootScope, DataService) {
$scope.category = DataService.getCategory(name);
$scope.$on('categories:updated', function(){
$scope.category = DataService.getCategory(name)
});
}]);

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

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
});