i'm new in Ionic and Angular JS.
In trying to update a collection (array) in ng-repeat directive.
That's my code.
VIEW:
<div ng-repeat="e in testList">...</div>
CONTROLLER:
.controller('TestCtrl', function ($scope, $stateParams) {
var param1 = $stateParams.param1;
$scope.testList = TestFactory.getTest(param1);
});
FACTORY
.factory('TestFactory', ['Auth', function (Auth) {
auth = Auth.get();
listObj = {};
auth.on('custom-trigger', function(index, value){
addElement(index, value);
});
function addElement(index, value){
var obj = {}
obj.test=(value);
listObj[index].push(obj);
};
var TestFactory = {
getTest: function (index) {
if (typeof listObj[index] == 'undefined')
listObj[index] = [];
return listObj[index];
}
};
return TestFactory;
}])
The object testList is populated after 'custom-trigger' fire: it works fine because I can see the new value in the log.
This trigger is fired at the begin of application (many time and it works fine every time) and after server notifications (here is the problem!!).
The problem is that the view is not updated. I think is a data binding problem.
You likely need to notify your controller than addElement has been triggered. Try adding another $broadcast and listener:
factory
.factory('TestFactory', ['$rootScope', 'Auth', function ($rootScope, Auth) {
// ...
function addElement(index, value){
var obj = {}
obj.test=(value);
listObj[index].push(obj);
// notify the app that `addElement` has occurred
$rootScope.$broadcast('elementAdded');
};
// ...
}])
controller
.controller('TestCtrl', function ($scope, $stateParams) {
var param1 = $stateParams.param1;
$scope.testList = TestFactory.getTest(param1);
// listen for elementAdded event; re-get testList
$scope.$on('elementAdded', function(){
$scope.testList = TestFactory.getTest(param1);
});
});
Related
I have an angular directive that shows payment history. By default, it shows the last 6 payments using the vm.numberOfPaymentsToDisplay variable. If you click view more, it adds 10. Now, when a user clicks on another section, there's a listener in the link function that is supposed to reset the number to 6, however vm is undefined.
Here's the code:
angular.module('nui.settings2.account')
.directive('paymentHistory', function(){
function PaymentHistoryController(paymentHistoryService, $filter, $window, $translate){
const filter = $filter('formatCurrency');
var vm = this;
vm.payments = paymentHistoryService.get();
vm.numberOfPaymentsToDisplay = 6;
vm.getLastPayment = getLastPayment;
vm.viewMorePayments = viewMorePayments;
vm.title = $translate.instant('NUI.SETTINGS.PAYMENT_HISTORY');
function getLastPayment(){
const lastTransaction = paymentHistoryService.getLastPayment();
return lastPaymentInfo = "amount (date)";
}
function viewMorePayments(){
vm.numberOfPaymentsToDisplay = vm.numberOfPaymentsToDisplay + 10;
return true;
}
}
function link(scope, element, attrs, [expander, paymentHistory]){
const containerEl = element.children();
expander.registerContentContainer(containerEl);
scope.$on(expander.COLLAPSE_EVENT, () => vm.numberOfPaymentsToDisplay = 6);
scope.$on("$destroy", () => scope.$emit(expander.CONTAINER_DEREGISTER_EVENT));
paymentHistory.cancel = () => expander.collapse();
}
return {
restrict: 'E',
templateUrl: 'nui/settings2/account/billing/payment-history.directive.html',
controller: PaymentHistoryController,
link: link,
require: ['^^settingExpander', 'paymentHistory'],
controllerAs: 'PaymentHistoryCtrl',
bindToController: true
};
});
How can I set vm.numberOfPaymentsToDisplay = 6 in the link function even though this knowledge is only known by the controller?
You can add a method to your PaymentHistoryController like setNumberOfPaymentsToDisplay as you inject your PaymentHistoryController into your link function you can call the method like this:
paymentHistory.setNumberOfPaymentsToDisplay(6);
Controller code:
function PaymentHistoryController(paymentHistoryService, $filter, $window, $translate){
const filter = $filter('formatCurrency');
var vm = this;
vm.payments = paymentHistoryService.get();
vm.numberOfPaymentsToDisplay = 6;
vm.getLastPayment = getLastPayment;
vm.viewMorePayments = viewMorePayments;
vm.setNumberOfPaymentsToDisplay = setNumberOfPaymentsToDisplay;
vm.title = $translate.instant('NUI.SETTINGS.PAYMENT_HISTORY');
function getLastPayment(){
const lastTransaction = paymentHistoryService.getLastPayment();
return lastPaymentInfo = "amount (date)";
}
function viewMorePayments(){
vm.numberOfPaymentsToDisplay = vm.numberOfPaymentsToDisplay + 10;
return true;
}
function setNumberOfPaymentsToDisplay(amount) {
vm.numberOfPaymentsToDisplay = amount;
}
}
link code:
function link(scope, element, attrs, [expander, paymentHistory]){
const containerEl = element.children();
expander.registerContentContainer(containerEl);
scope.$on(expander.COLLAPSE_EVENT, () => paymentHistory.setNumberOfPaymentsToDisplay(6));
scope.$on("$destroy", () => scope.$emit(expander.CONTAINER_DEREGISTER_EVENT));
paymentHistory.cancel = () => expander.collapse();
}
Actually you have more options.
the general approach to share data between components is to use a service that is a singleton , a single instance cached and injected by angular everytime you use it inside your component. another valid solution is to emit events.
Service:
.service('MyService', function(){
var data;
this.setData = function(newData){
data = newData;
}
this.getData = function(){
return data;
}
})
Events:
$rootScope.$broadcast('my.evt', data); //down in the scope chain, visible to any scope
$rootScope.$emit('my.evt', data); //up in the scope chain since is the rootscope only visible to rootScope
$scope.$emit //up in the scope chain
$scope.$broacast //down in the scope chain
to listen for events:
$rootScope.$on('my.evt', function(evt, data){ //do something }
or
$scope.$on('my.evt', function(evt, data){ //do something }
However in this case you're using the link function to modify your business logic and this is not the the conventional approach, usually the link is used only to handle dom events and to modify the dom. so my personal advice is to refactor your code and put the whole business logic inside the controller
I am new to AngularJS and Jasmine. Given the following controller, how do I test whether the allPanelsRetrieved() function is called when the $scope.getPanels is triggered?
angular.
module('panelList').
controller('PanelListController', ['Panel', 'PanelSelection', '$scope', '$location', '$uibModal', '$rootScope',
function PanelListController(PanelSelection, $scope, $location, $uibModal, $rootScope) {
$scope.maxAbv = 2;
$scope.minAbv = 12;
this.allPanelsRetrieved = (index, before, filterParams) => {
.....
};
$scope.getPanels = () => {
const filterParams = {};
filterParams.abv_lt = $scope.minAbv;
filterParams.abv_gt = $scope.maxAbv;
$scope.currentPagePanels = this.allPanelsRetrieved (1,[], filterParams);
};
}]).
component('panelList', {
templateUrl: '/components/panel-list/panel-list.template.html',
controller:'PanelListController',
});
Assuming you want allPanelsRetrived to be called, then simply use a boolean.
var bool = false
this.allPanelsRetrieved = (index, before, filterParams) => {
.....
bool=true;
};
$scope.getPanels = () => {
if (bool) {
const filterParams = {};
filterParams.abv_lt = $scope.minAbv;
filterParams.abv_gt = $scope.maxAbv;
$scope.currentPagePanels = this.allPanelsRetrieved (1,[], filterParams);
} else {
// allPanelsRetrieved was not called
}
};
I can see that allPanelsRetrieved seems to be a private(local) method and used inside that controller.
You need not test private(local) methods execution.
If you still want to check if the method is triggered or not you can use jasmine's toHaveBeenCalled() method
execept(myMethod).toHaveBeenCalled();
passes when method is called.
I'm really new to AngularJS so this might be really obvious!
I've got a service which does some basic checks and then returns the information. I call this service in a controller and in a function.
When I call it in the controller it works fine without an error.
When I call it in the function I get
angular.js:9101 ReferenceError: systemService is not defined
Call to service in Controller that works:
myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
$scope.ContinueAngularMethod = function () {
$rootScope.field = 'payment';
$scope.field = $rootScope.field;
$scope.notApp = '1';
console.log("I don't error in here");
$scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
$rootScope.$apply();
}
}]);
Call to service in function that doesn't work:
function MyCtrl($scope) {
$scope.changeme = function () {
console.log("Drop down changes ideally do something here....");
//Call to service
$scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
console.log($scope.ss.field);
console.log($scope.ss.notAppJ);
}
This is my code in full:
<script type='text/javascript'>
//Angular stuff
var myApp = angular.module('myApp', []);
//Set up my service
myApp.service('systemService', function () {
this.info = {}; //Declaring the object
this.checkDropDownValue = function (type, notAppJ) {
if (type != 'PayPal') {
console.log("I am not PayPal");
field = 'other'
notApp = '0';
}
else if (type == 'PayPal' && notApp == '1') {
console.log("i am in the else if - functionality later");
}
else {
console.log("i am in the else - functionality later");
}
this.info.field = type;
this.info.number = notApp;
return this.info;
};
});
myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
$scope.ContinueAngularMethod = function () {
$rootScope.field = 'payment';
$scope.field = $rootScope.field;
$scope.notApp = '1';
console.log("I don't error in here");
$scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
$rootScope.$apply();
}
}]);
function MyCtrl($scope) {
$scope.changeme = function () {
console.log("Drop down changes ideally do something here....");
//Call to service
$scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
console.log($scope.ss.field);
console.log($scope.ss.notAppJ);
}
$scope.myFunct = function (keyEvent) {
if (keyEvent.which === 13) {
//They hit the enter key so ignore this
keyEvent.preventDefault();
}
//Becauase a new child scope is generated you can't use $scope as that refers to the parent . But this refers to the child.
var rPromise = findAll(this.softwareText);
}
}
</script>
I tried these without any luck:
angular Uncaught ReferenceError: Service is not defined
AngularJS - ReferenceError: $ is not defined
Initialize $scope variables for multiple controllers - AngularJS
Your use of defining the MyCtrl is deprecated, you need angular to inject the systemService depedency in order to use it.
Try defining the MyCtrl controller the same way you defined continueController, like this:
myApp.controller('MyCtrl', ["$scope", 'systemService', function ($scope, systemService) {
$scope.changeme = function () {
console.log("Drop down changes ideally do something here....");
//Call to service
$scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
console.log($scope.ss.field);
console.log($scope.ss.notAppJ);
}
$scope.myFunct = function (keyEvent) {
if (keyEvent.which === 13) {
//They hit the enter key so ignore this
keyEvent.preventDefault();
}
//Becauase a new child scope is generated you can't use $scope as that refers to the parent . But this refers to the child.
var rPromise = findAll(this.softwareText);
}
}]);
MyCtrl shoud provide dependency to systemService with $inject property like
function MyCtrl($scope, systemService) {
}
MyCtrl.$inject = ['$scope', 'systemService']
There's quite a few topics out there covering issues with sharing data between controllers, but I havn't found any good answers for my case.
I have one controller that fetches data asynchronous using promise. The controller then makes a copy of the data to work with within that scope. I then have a second controller which I want also want to work on the same copy of data that of the first controller so they both share it.
Here's some code simplified to serve as example:
.controller('firstController', function ($scope, someService){
var vm = this;
someService.getData().then(function(data) {
angular.copy(data, vm.data); //creates a copy and places it on scope
someService.setCurrentData(vm.data)
}
});
.controller('secondController', function ($scope, someService){
var vm = this;
vm.data = someService.getCurrentData(); //Triggers before the setter in firstController
});
.factory('someService', function(fetchService){
var _currentData = {};
var getData = function(){
return fetchService.fetchData().then(function(data) { return data; });
};
var getCurrentData = function(){
return _currentData;
}
var setCurrentData = function(data){
_currentData = data;
}
});
As the getData is async will the setCurrentData be triggered after the getCurrentData, so getCurrentData gives a different object and does not change to the correct one. I know you can solve this with broadcast and watch, but I'm trying to avoid using it if possible.
Refactor your factory to check if the _currentData variable has already been set - then you can simply use callbacks:
app.factory('someService', function(fetchService){
var _currentData = null;
var setCurrentData = function(data){
_currentData = data;
}
var getData = function(callback) {
if (_currentData == null) {
fetchService.fetchData().success(function(data) {
setCurrentData(data);
callback(data);
});
} else {
callback(_currentData);
}
};
/*
var getCurrentData = function(){
return _currentData;
}
*/
});
Now, calling your getData service will check if the data is already got and stored, if so, use that, else go get it!
someService.getData(function(data) {
console.log(data); //yay for persistence!
})
I would solve in this way:
.controller('firstController', function ($scope, $rootScope, someService){
var vm = this;
someService.getData().then(function(data) {
angular.copy(data, vm.data); //creates a copy and places it on scope
someService.setCurrentData(vm.data);
$rootScope.$broadcast('myData:updated');
}
});
.controller('secondController', function ($scope, $rootScope, someService){
var vm = this;
$rootScope.$on('myData:updated', function(event, data) {
vm.data = someService.getCurrentData();
});
});
I have two controllers on a parallel scope level I need to pass data between:
function TableRowCtrl($scope, $http, sharedProperties) {
console.log(sharedProperties.getProperty());
$scope.items = sharedProperties.getProperty();
}
and
function SideNavCtrl($scope, $http, sharedProperties) {
$scope.customers = undefined;
var temp = "cats";
$http.get('data/customers.json').success(function(data) {
$scope.customers = data;
temp = "dogs";
sharedProperties.setProperty(temp)
});
sharedProperties.setProperty(temp);
console.log(sharedProperties.getProperty());
}
I am trying to use a service to do this (via examples I have seen) :
angular.module('myApp', []).service('sharedProperties', function() {
var property = "Cats";
return {
getProperty: function() {
return property;
},
setProperty: function(value) {
property = value;
}
};
});
However - when I try and set the data in the SideNavCtrl http success function, it does not bubble out - the service still returns 'cats' as its value. From what I have read, services are supposed to be global, and setting data in them should be permanent (as is its purpose). What am I doing wrong, and how can I get data between these two controllers on the same scope?
The problem is your TableRowCtrl saves the result of a function in its scope variable. When the service itself changes, the value in the scope does not because at that point, it's a simple property. You can either expose your service directly in the scope or wrap $scope.items in a function instead:
function TableRowCtrl($scope, $http, sharedProperties) {
$scope.items = function() { return sharedProperties.getProperty(); };
}
// And in your view
{{ items() }}
Or
function TableRowCtrl($scope, $http, sharedProperties) {
$scope.shared = sharedProperties;
}
// And in your view
{{ shared.getProperties() }}
Edit: Simple plunkr here
Edit #2:
If the problem is a binding that isn't updated because of an asynchronous process, you can use $scope.$apply:
$http.get('data/customers.json').success(function(data) {
$scope.customers = data;
temp = "dogs";
sharedProperties.setProperty(temp)
if(!$scope.$$phase)
$scope.$apply();
});
Edit 3:
I've recreated your $http.get and updated the plunkr and it works. Based on what you are showing in your questions, it should work using function instead of regular properties.
#SimomBelanger already identified the problem. I suggest using objects rather than primitives, then you don't need to call functions in your view:
<div ng-controller="TableRowCtrl">items={{items.property}}</div>
<div ng-controller="SideNavCtrl">customers={{customers}}</div>
app.service('sharedProperties', function () {
var obj = {
property: "Cats"
};
return {
getObj: function () {
return obj;
},
setObjProperty: function (value) {
obj.property = value;
}
};
});
function SideNavCtrl($scope, $timeout, sharedProperties) {
$scope.customers = undefined;
var temp = "cats";
$timeout(function () {
$scope.customers = 'some data';
temp = "dogs";
sharedProperties.setObjProperty(temp);
}, 2000);
sharedProperties.setObjProperty(temp);
}
function TableRowCtrl($scope, $http, sharedProperties) {
$scope.items = sharedProperties.getObj();
}
fiddle
In the fiddle I use $timeout to simulate an $http response.
Because getObj() returns a (reference to an) object, updates to that object are automatically picked up by the view.