We Keep Coding

AngularJS 1.6.8: Uncaught ReferenceError: $rootScope is not defined

Uncaught ReferenceError: $rootScope is not defined
I have a form and on submit button, I am trying to store data in localStorage.
I found this below solution here: How do I store data in local storage using Angularjs?
not sure what or where I am going wrong.
Below is the related code.
contact.component.js
angular.module('myApp')
.component('contactComponent', {
restrict: 'E',
$scope:{},
templateUrl:'contact/contact.html',
controller: contactController,
controllerAs: 'vm',
factory:'userService',
$rootscope:{}
});
function contactController($scope, $state,userService,$rootScope) {
$scope.navigate = function(home){
$state.go(home)
};
$scope.user = userService;
};
function userService($rootScope) {
var service = {
model: {
name: '',
email: '',
query:''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
};
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (sessionStorage.restorestate == "true") {
$rootScope.$broadcast('restorestate'); //let everything know we need to restore state
sessionStorage.restorestate = false;
}
});
//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
$rootScope.$broadcast('savestate');
};

$scope in AngularJS modal doesn't pass data into the template

I am new to AngularJS. I have created the following controller that display a list of results and that opens a modal when a specific button is clicked:
angular.
module('panelList')
.component('panelList', {
templateUrl: '/panel-list/panel-list.template.html',
controller: ['Panel', 'PanelSelection', '$scope', '$location', '$uibModal',
function PanelListController(Panel, PanelSelection, $scope, $location, $uibModal) {
$scope.maxAbv = 2;
$scope.minAbv = 12;
$scope.maxIbu = 0;
$scope.minIbu = 100;
this.allPanelsRetrieved = (index, before, filterParams) => {
let allPanels = before;
const params = Object.assign({},
{ page: index, per_page: 80 },
filterParams);
Panel.query(params).$promise.then(data => {
if (data.length > 0) {
allPanels.push(...data);
return this.allPanelsRetrieved(index+1, allPanels, filterParams);
} else {
return allPanels;
}
});
return allPanels;
};
$scope.getPanels = () => {
const filterParams = {};
filterParams.abv_lt = $scope.minAbv;
filterParams.abv_gt = $scope.maxAbv;
filterParams.ibu_lt = $scope.minIbu;
filterParams.ibu_gt = $scope.maxIbu;
$scope.currentPagePanels = this.allPanelsRetrieved(1,[], filterParams);
};
$scope.showDetails = (panelSelected) => {
PanelSelection.setPanelSelected(panelSelected);
$uibModal.open({
component: "panelDetail",
scope: $scope,
bindToController: true,
})
};
}]
});
The controller for the modal is specified here:
angular.
module('panelDetail').
component('panelDetail', {
templateUrl: '/panel-detail/panel-detail.template.html',
controller: ['PanelSelection', '$scope','$uibModal',
function PanelDetailController(PanelSelection, $scope, $uibModal, $uibModalInstance) {
$scope.ok = () => {
$uibModalInstance.close();
};
let panelSelected = PanelSelection.getPanelSelected();
$scope.panel = panelSelected;
console.log(panelSelected);
$scope.foodPairings = panelSelected.food_pairing.join(", ");
$scope.allIngredients = this.getFormattedIngredients(panelSelected.ingredients);
$scope.method = this.getFormattedMethod(panelSelected.method);
this.getFormattedIngredients = (ingredients) => {
const listOfIngredients = [];
Object.keys(ingredients).forEach(key => {
if(Array.isArray(ingredients[key])){
for(let ingredient of ingredients[key]){
listOfIngredients.push(
`- ${ingredient.name} ${key} (${ingredient.amount.value} ${ingredient.amount.unit})`
.concat(ingredient.add != undefined ? ', added in the '+ingredient.add:'',
ingredient.attribute != undefined ? ', attribute: '+ingredient.attribute:'','.')
);
}
}else{
listOfIngredients.push(`- ${ingredients[key]} ${key}.`);
}
});
return listOfIngredients;
};
$scope.getFormattedMethod = (method) => {
const listOfMethodProcedures = [];
Object.keys(method).forEach(key => {
if(Array.isArray(method[key])){
for(let methodProcedure of method[key]){
listOfMethodProcedures.push(
`- ${key} at ${methodProcedure.temp.value} ${methodProcedure.temp.unit} `
.concat(methodProcedure.duration != undefined ? 'for '+methodProcedure.duration +' min.' : '.')
);
}
}else{
listOfMethodProcedures.push(`- ${key}.`);
}
});
return listOfMethodProcedures;
};
}
]
});
The modal is open correctly but the values inside are not taken from the scope, as they should, but they are displayed as {{value}}. In few words, the $scope passed doesn't act as scope. Moreover I get the following error:
TypeError: this.getFormattedIngredients is not a function
at new PanelDetailController
Where the error may be? How to pass successfully a scope from one controller to another for modal?

Instead of scope: $scope pass values using
resolve: { scope: $scope }

You are calling the getFormattedIngredients function before it gets declared. So this is not a $scope issue. You need to declare the function before it gets called. One way to solve such an issue is going with the angular Styleguide provided by John Papa. Angular Styleguide
Assign your function at the top of your Component/Controller/Service and use function expressions instead of function declarations.
function PanelDetailController(PanelSelection, $scope, $uibModal,$uibModalInstance) {
this.getFormattedIngredients = getFormattedIngredients;
// You can call your function from here without getting an error
// Other Code..
function getFormattedIngredients() {}

How to get value from directive in Angular

I neeed to pass a value from this part of the code in my directive to a controller, but not sure how to achieve that:
if (!scope.multiple) {
scope.model = value;
console.log(scope.model);
return;
}
I get the value in the console.log, I just don't know how to pass it to the controller.
This is the complete directive:
angular.module('quiz.directives')
.directive('fancySelect', function($rootScope, $timeout) {
return {
restrict: 'E',
templateUrl: 'templates/directives/fancySelect.html',
scope: {
title: '#',
model: '=',
options: '=',
multiple: '=',
enable: '=',
onChange: '&',
class: '#'
},
link: function(scope) {
scope.showOptions = false;
scope.displayValues = [];
scope.$watch('enable', function(enable) {
if (!enable && scope.showOptions) {
scope.toggleShowOptions(false);
}
});
scope.toggleShowOptions = function(show) {
if (!scope.enable) {
return;
}
if (show === undefined) {
show = !scope.showOptions;
}
if (show) {
$rootScope.$broadcast('fancySelect:hideAll');
}
$timeout(function() {
scope.showOptions = show;
});
};
scope.toggleValue = function(value) {
if (!value) {
return;
}
if (!scope.multiple) {
scope.model = value;
console.log(scope.model);
return;
}
var index = scope.model.indexOf(value);
if (index >= 0) {
scope.model.splice(index, 1);
}
else {
scope.model.push(value);
}
if (scope.onChange) {
scope.onChange();
}
};
scope.getDisplayValues = function() {
if (!scope.options || !scope.model) {
return [];
}
if (!scope.multiple && scope.model) {
return scope.options.filter(function(opt) {
return opt.id == scope.model;
});
}
return scope.options.filter(function(opt) {
return scope.model.indexOf(opt.id) >= 0;
});
};
$rootScope.$on('fancySelect:hideAll', function() {
scope.showOptions = false;
});
}
};
});
Updated
I tried to do as suggested in the answers by #Zidane and defining my object first in the controller like this:
$scope.year = {};
var saveUser = function(user) {
$scope.profilePromise = UserService.save(user);
console.log($scope.year);
This is the template:
<fancy-select
title="Klassetrinn"
model="year"
options="years"
enable="true"
on-change="onChangeYears()"
active="yearsActive"
name="playerYear"
form-name="registerForm"
>
</fancy-select>
But I got an empty object in that case.
When I define my objects like this I get the right value in the controller but in the view the title is not being displayed anymore:
$scope.search = {
years: []
};
var saveUser = function(user) {
$scope.profilePromise = UserService.save(user);
console.log($scope.search.years);
<fancy-select
title="Klassetrinn"
model="search.years"
options="years"
enable="true"
on-change="onChangeYears()"
active="yearsActive"
name="playerYear"
form-name="registerForm"
>
</fancy-select>

As you defined an isolated scope for your directive like this
scope: {
...
model: '=',
...
},
you give your directive a reference to an object on your controller scope.
Declaring the directive like <fancy-select model="myModel" ....></fancy-select> you pass your directive a reference to scope.myModel on your controller. When you modify a property on the scope.model object in your directive you automatically modify the same property on the scope.myModel object in your controller.
So you have to do
myApp.controller('myController', function($scope) {
...
$scope.myModel = {};
...
}
in your controller and in your directive just do
if (!scope.multiple) {
scope.model.value = value;
return;
}
Then you can get the value in your controller via $scope.myModel.value.
For clarification: You have to define an object on your controller and pass the directive the reference for this object so that the directive can follow the reference and doesn't mask it. If you did in your directive scope.model = 33 then you would just mask the reference passed to it from the controller, which means scope.model wouldn't point to the object on the controller anymore. When you do scope.model.value = 33 then you actually follow the object reference and modify the object on the controller scope.

you can use services or factories to share data between your angular application parts, for example
angular.module('myapp').factory('myDataSharing', myDataSharing);
function myDataSharing() {
var sharedData = {
fieldOne: ''
};
return {
setData: setData,
getData: getData,
};
function setData(dataFieldValue) {
sharedData.fieldOne = dataFieldValue;
};
function getData() {
sharedData.fieldOne
};
directive:
myDataSharing.setData(dataValue);
controller:
angular.module('myapp').controller('myController' ['myDataSharing'], function(myDataSharing) {
var myDataFromSharedService = myDataSharing.getData();
}

is it Possible (partial class) concept for controller in angularjs?

Is there any way to do code grouping using partials in angularjs?
Reason --- I have a controller which contains too much code. This controller contains the code For several Methods and a lot of functionalities, it reduces the readability of the code. I want to keep controller name the same and do code grouping.
Ex:-
app.controller('MainController', function ($scope, router) {
$scope.Read = function() {
};
$scope.Write = function() {
};
$scope.Update = function() {
};
$scope.Delete = function() {
};
});
Partial:
app.controller('MainController', function ($scope, router) {
$scope.firstName = firstname;
$scope.middleName = middleName;
$scope.lastName = lastName;
});
Another Partial:
app.controller('MainController', function ($scope, router) {
$scope.Print = function() {
};
$scope.PrintPreviw = function() {
};
});
I need to implement it like this.
Is there any other way? yes please update..
Thanks

You could try to sort the code into logical chunks. after that, you could merge logical chunks into objects.
//Do NOT do this!
$scope.firstName = firstname;
$scope.middleName = middleName;
$scope.lastName = lastName;
//instead do this
var person = {
firstname: "name",
middleName: "mName",
lastName: "Lname"
}
//then in your view access them like this
{ { person.firstname } }
Also, you could move some code into services or factories. then use those methods inside of your controller.
//take things out of your controller and put then in a service or factory.
app.service('notePad', function () {
return {
Read: function (newState) {
return state += state;
},
Write: function (state) {
return state += state;
},
Update: function (state) {
state = state;
},
Delete: function () {
state = null;
}
};
});
//then in your controller access them like this
//Note you do not need everything on $scope if you are not going to use it in the view.
app.controller('MainController', function ($scope, router, notePad) {
$scope.Read = notePad.Read();
$scope.Write = notePad.Write();
$scope.Update = notePad.Update();
$scope.Delete = notePad.Delete();
});
If you need the functionality of a controller inside of a service you can still access scope and other controller properties like this.
NOTE: Make sure you create an onDestroy method to clean up any leftover variables.
//pass your scope to your service
app.controller('MainController', function ($scope, router, notePad) {
notePad.changeView($scope);
});
//munipulate your scope just like you would in a controller
app.service('notePad', function () {
function changeView(scope) {
scope.write = 'example';
}
});
//the result of the scope change in the service will show up in the view
{ { write } } == 'example'

AngularJS watching service variable from directive, how to correctly implement factory?

I want to watch angular factory variable from inside directive, and act upon change.
I must be missing something fundamental from Javascript, but can someone explain, why approach (1) using inline object works, and approach (2) using prototyping does not?
Does prototype somehow hide user variable scope from angular $watch?
How can i make this code more clean?
(1):
Plunkr demo
angular.module('testApp', [
])
.factory('myUser', [function () {
var userService = {};
var user = {id : Date.now()};
userService.get = function() {
return user;
};
userService.set = function(newUser) {
user = newUser;
};
return userService;
}])
.directive('userId',['myUser',function(myUser) {
return {
restrict : 'A',
link: function(scope, elm, attrs) {
scope.$watch(myUser.get, function(newUser) {
if(newUser) {
elm.text(newUser.id);
}
});
}
};
}])
.controller('ChangeCtrl', ['myUser', '$scope',function(myUser, $scope) {
$scope.change = function() {
myUser.set({id: Date.now()});
};
}]);
(2):
Plunkr demo
angular.module('testApp', [
])
.factory('myUser', [function () {
var user = {id : Date.now()};
var UserService = function(initial) {
this.user = initial;
}
UserService.prototype.get = function() {
return this.user;
};
UserService.prototype.set = function(newUser) {
this.user = newUser;
};
return new UserService(user);
}])
.directive('userId',['myUser',function(myUser) {
return {
restrict : 'A',
link: function(scope, elm, attrs) {
scope.$watch(myUser.get, function(newUser) {
//this watch does not fire
if(newUser) {
elm.text(newUser.id);
}
});
}
};
}])
.controller('ChangeCtrl', ['myUser', '$scope',function(myUser, $scope) {
$scope.change = function() {
myUser.set({id: Date.now()});
};
}]);

Case 1:
myUser.get function reference is called without a context (return user), and the user object is returned as a closure variable.
Case 2:
myUser.get function reference is called without a context (return this.user), and so this.user only just don't throw an error because you are not in "strict mode" where this is pointing to the window object, thus resulting in this.user being just undefined.
What you actually missed is the fact that giving myUser.get as a watcher check function is giving a reference to a function, which will not be applied to myUser as a context when used by the watcher.

As i remember angular watches only properties belonging to the object.
The watch function does this by checking the property with hasOwnProperty