I already have seem other topics with this kind of issue, but no one could help me... So here is my issue:
I have a navbar with a button for search, this buttons makes and get request from a webservice and returns a json object which must be apply to fill an table list. The problem is, my button and my table are in separated controllers, and it does work like I expected.
var app = angular.module('clientRest', []).controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
$scope.contatos = loadLista.getContatos();
}]).controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
$scope.listar = function() {
$http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
loadLista.setContatos(response);
});
};
}]).service('loadLista', function() {
var contatos = [];
return {
getContatos: function() {
return contatos;
},
setContatos: function(c) {
contatos = c;
}
};
});
My code...
When I call listar() from pesquisa controller I need to send received data to $scope.contatos from lista controller to make my ng-repeat work, everything with a single click.
How can I do it?
Thanks everyone
Better to use a service to share data between two controllers / modules as this might be the best approach. You can refer the code segment given below to understand the concept.
angular.module('app.A', [])
.service('ServiceA', function() {
this.getValue = function() {
return this.myValue;
};
this.setValue = function(newValue) {
this.myValue = newValue;
}
});
angular.module('app.B', ['app.A'])
.service('ServiceB', function(ServiceA) {
this.getValue = function() {
return ServiceA.getValue();
};
this.setValue = function() {
ServiceA.setValue('New value');
}
});
In order to trigger the data receipt event, you may use
Broadcast / emit messages - with #broadcast / #emit
An angular promise with a call back
Controller initiation function to reload the previously read information from a service
.controller('MyController', function($scope, ServiceA) {
$scope.init = function() {
$scope.myValue = ServiceA.getValue();
};
// Call the function to initialize during Controller instantiation
$scope.init();
});
Use $rootScope.$emit to emit a change event when setting the variable and use $on to get the value in the lista controller. I used customListAr here just to demostrate a button click. Does this help?
var app = angular.module('clientRest', [])
.controller('lista', ['$scope', 'loadLista', '$rootScope',
function($scope, loadLista, $rootScope) {
console.log(loadLista);
$scope.contatos = loadLista.getContatos();
$rootScope.$on('change', function() {
$scope.contatos = loadLista.getContatos();
});
}
])
.controller('pesquisa', ['$scope', '$http', 'loadLista',
function($scope, $http, loadLista) {
$scope.listar = function() {
$http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
loadLista.setContatos(response);
});
};
$scope.customListAr = function() {
loadLista.setContatos(["item 1" , "item 2", "item 3"]);
}
}
])
.service('loadLista', ['$rootScope',
function($rootScope) {
var contatos = [];
return {
getContatos: function() {
return contatos;
},
setContatos: function(c) {
contatos = c;
$rootScope.$emit('change');
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="clientRest">
<div ng-controller="lista">
<ul>
<li ng-repeat="a in contatos">{{a}}</li>
</ul>
</div>
<div ng-controller="pesquisa">
<button ng-click="customListAr()">Click Me</button>
</div>
</div>
Your problem is that when you do $scope.contatos = loadLista.getContatos(); you are setting a static value, and angular is unable to effectively create a watcher for that object because your setContatos method is creating a new object each time. To get around this, have the controller's scope hold a reference to the parent object and then it will automatically have a watcher on that object.
var app = angular.module('clientRest', [])
.controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
$scope.contatos = loadLista.contatos;
}])
.controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
$scope.listar = function() {
$http.get("http://localhost/wsRest/index.php/contato"
).success(function (response) {
loadLista.contatos.data = response;
});
};
}])
.service('loadLista', function() {
var lista = {
contatos: {},
};
return lista;
});
// view:
<ul>
<li ng-repeat="contato in contatos.data">
{{ contato }}
</li>
</ul>
Related
im using angularJS v 1.5.6 and want to know how to pass my form data correctly with $location.path.
Here is my code Page A:
<form>
...
<button type="submit" ng-click="submit(formData)">submit</button>
</form>
JS:
app.config(['$routeProvider', function ($routeProvider) {$routeProvider
// Home
.when("/", {
templateUrl: "A.html",
controller: "ACtrl"
})
.when("/B/", {
templateUrl: "B.html",
controller: "BCtrl"
})
//fallback url if nothing matches
.otherwise({
redirectTo: '/'
});
}]);
app.controller('ACtrl', function ( $scope, $location, $http) {
$scope.formData = {};
$scope.submit = function() {
$location.path("/B/" + $scope.formData );
};
});
//controller for B page
app.controller('BCtrl', ['$scope', '$routeParams',
function($scope,$routeParams) {
$scope.formData = $routeParams.formData;
}]);
it is a pretty simple example, but i cant figure out how to solve it :(
By clicking the submit nothing happens. If i remove the $scope from $scope.formData i get a error like: Error: formData is not defined.
The terms in formdata are available, i tested it with console.log($scope.formData) and everything is ok.
here is the link plunker: https://plnkr.co/edit/K5zwcmRRyom5HR4a5Q9o
EDIT
the only issue is now, how to handle the select object correctly in the foreach loop. Need help please
You can do it by creating a service and using setter/getter in order to transfer a variable.
For example like this: https://plnkr.co/edit/IuTXsVLU7dq3TylfnSYP?p=preview
app.service('TransferService', [function(){
var savedData,
service = {
getData: getData,
setData: setData
}
function getData(){
return savedData
}
function setData(data){
savedData = data
}
return service
}])
Don't use location.path...
You could either use a service or use localstorage (or some other browser storage mechanism [sessionStorage, indexdb].
Service Method Below
app.service("SomeService", function () {
var value = null;
this.set = function (val) {
value = val;
return this;
}
this.get = function () {
return value;
}
})
app.controller("ACtrl", function ($scope, SomeService) {
$scope.formData = {};
$scope.submit = function() {
//Assuming you've populated it with some data...
SomeService.set($scope.formData);
$location.path("/B/");
};
})
app.controller("BCtrl", function ($scope, SomeService) {
$scope.formData;
(function () {
//Check that the data is present in the SomeService service.
var dataFromACtrl = SomeService.get();
if (dataFromACtrl) {
$scope.formData = dataFromACtrl;
}
})();
})
Using localStrorage below, could be sessionStorage.
app.controller("ACtrl", function ($scope, SomeService) {
$scope.formData = {};
$scope.submit = function() {
//Assuming you've populated it with some data...
window.localStorage.setItem("form_data", JSON.stringify($scope.form_data));
$location.path("/B/");
};
})
app.controller("BCtrl", function ($scope, SomeService) {
$scope.formData;
(function () {
var dataFromACtrl = window.localStorage.getItem("form_data");
if (dataFromACtrl) {
$scope.formData = JSON.parse(dataFromACtrl);
}
})();
})
Note
Using the localStorage example you would need to do some clean-up, after doing whatever you want to do with that data in Bctrl you'd want to clear the entry in localstorage using either of the below lines of code:
window.localStorage.removeItem("form_data");
delete window.localStorage["form_data"];
I'm in the middle of migrating to Angular based front-end. I have a function in JavaScript to pass some data to directive, after some research found that using Service and $broadcast could be a good solution. but doesn't work for me ...
here is my code :
var app = angular.module('app', []);
app.factory('broadcastService', ['$rootScope',
function($rootScope) {
var factory = {};
factory.sendAjaxResut = function(name, obj) {
console.log(' -- $broadcast ');
$rootScope.$broadcast(name, obj);
}
return factory;
}
]);
app.directive("bill", [directive]);
function directive() {
return {
restrict: "E",
link: function($scope) {
$scope.$on("b1", function(e, a) {
console.log('-- directive')
});
}
}
}
code for passing data to service :
function _ajaxCUSTOMER(e) {
angular
.injector(['ng' ,'app'])
.get("broadcastService")
.sendAjaxResut("b1", e);
}
<button onclick="_ajaxCUSTOMER('foo')" >Send</button>
Question 1 : what is ng in .injector(['ng' ,'app'])
Question 2 : at this time console only shows -- $broadcast. what is the problem of my code that can't catching event in directive
jsfiddle
Your directive is not getting the $broadcast because you are creating a new injector with a new $rootScope. Instead use the injector of your app.
function _ajaxCUSTOMER1(e) {
var rawElem = document.getElementById("app");
var elem = angular.element(rawElem);
var _injector = elem.injector();
var _broadcastService = _injector.get("broadcastService");
_broadcastService.sendAjaxResut("b1",e);
}
This example finds the element of your app and uses angular.element to retrieve its injector.
The working JSFiddle.
YOu can try this solution:
<button onclick="_ajaxCUSTOMER('foo', 'e')" >Send</button>
function _ajaxCUSTOMER(name,obj) {
angular.element(document).find('body').injector().get('broadcastService').sendAjaxResut(name, obj);
console.log('ok');
}
myApp.factory('broadcastService', ['$rootScope',
function($rootScope) {
console.log('broadcastService');
var factory = {};
factory.sendAjaxResut = function(name, obj) {
console.log(' -- $broadcast ');
$rootScope.$broadcast('newEvent', name, obj);
}
return factory;
}
]);
myApp.directive('bill', function () {
return {
restrict: 'EAC',
controller: function($scope) {},
link: function(scope, element, attrs) {
scope.$on("newEvent", function(event, data, name, obj) {
console.log('-- directive')
});
}
};
});
You need define controller in your html.
Live example on jsfiddle.
var app = angular.module('app', [])
.controller('ExampleController', function($scope, broadcastService) {
});
app.factory('broadcastService', ['$rootScope',
function($rootScope) {
var factory = {};
factory.sendAjaxResut = function(name, obj) {
console.log(' -- $broadcast ');
$rootScope.$broadcast(name, obj);
}
return factory;
}
]);
app.directive("bill", function($rootScope) {
return {
restrict: "E",
template:'<div>My bill</div>',
link: function($scope) {
$rootScope.$on("b1", function(e, a) {
console.log('-- directive',a)
});
}
}
});
function _ajaxCUSTOMER1(e) {
angular.element(document).find('body').injector().get('broadcastService').sendAjaxResut('b1', e);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="app" ng-app="app">
<div ng-controller="ExampleController">
<button onclick="_ajaxCUSTOMER1('5')">
Click Here to send 5
</button>
<bill>
</bill>
</div>
</body>
EDIT - lots of changes
After my page loads, I have some javascript function calls that return data which will be used in my markup to populate tag options.
Currently the issue is this: When the values are changed by the javascript outside ( and even inside the AngularJS controller). The view is not being updated. I have tried wrapping scope assignments in $scope.$apply(...) however this just results in a $digest() already in progress error.
AngularJS Code:
app.service('userService', ['$http', function($http) {
var userModel = {
qGroupZero: '',
qGroupOne: '',
qGroupTwo: ''
};
var states = '';
return{
getUserModel: function() {
return userModel;
},
getStates: function() {
return states;
},
loadChallengeQuestions: function() {
var userEnrollmentChallenge = getChallengeQuestions();
console.log('loadChallengeQuestions()');
userModel.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
userModel.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
userModel.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
},
loadStates: function(callback) {
console.log('loadStates()');
return $http.get('content/states.json').then(function(result) {
states = result.data;
});
}
};
}]);
app.controller('EnrollmentController', ['$scope', 'userService', '$http', function($scope, userService, $http) { //Dependencies and Constructor function.
$scope.userService = userService;
$scope.states = [];
userService.loadChallengeQuestions();
var userModel = userService.getUserModel();
$scope.qGroupZero = userModel.qGroupZero.challengeQuestion; //<-- This assignment is not updated in the view.
userService.loadStates().then(function(result) {
$scope.states = userService.getStates(); //<-- This assignment is not updated in the view.
});
}]);
The content of challengeQuestion is a JSON array of 7 items.
The Markup:
<select ng-model="selectionOne"
name="question1"
ng-options="opt as opt.questionText for opt in qGroupZero">
</select>
<select ng-model="state"
name="state"
ng-options="opt as opt.abbreviation for opt in states"
class="required">
</select>
So at this point. I have all my resources. And I just need to find a way to get AngularJS to re-evaluate the ng-options value (a $scope.value) and redraw the content? I think I'm saying that right...
Why do I feel that this should be easy? And yet three days later here I am :D
Thanks for reading and helping!!!
What if you use the angular $http service and promise objects instead?
app.service('userService', ['$http', function($http) {
var userModel: {
qGroupZero: '',
qGroupOne: '',
qGroupTwo: ''
};
var states = '';
return{
getUserModel: function(){
return userModel;
},
getStates: function(){
return states;
},
loadChallengeQuestions: function(userEnrollmentChallenge) {
console.log('loadChallengeQuestions()');
userModel.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
userModel.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
userModel.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
},
loadStates: function(){
return $http.get('content/states.json').then(function(result){
states = result.data;
});
}
}
});
app.controller('EnrollmentController', ['$scope', 'userService', function($scope, userService) { //Dependencies and Constructor function.
$scope.states = [];
userService.loadStates().then(function(result){
var userModel = userService.getUserModel();
$scope.states = userService.getStates();
$scope.qGroupZero = userModel.qGroupZero.challengeQuestion;
});
}]);
I am using angular.js. I have a controller for my navbar which looks as follows.
var controllers = angular.module('controllers', []);
controllers.controller('NavbarController', ['$scope', '$http',
function ($scope, $http) {
$http.get('/api/courses')
.success(function(data) {
$scope.courses = data.objects;
});
}
]);
This will give me all the courses which have been created. I put it on the navbar like so:
<ul class="dropdown-menu">
<li ng-repeat="course in courses">
{{ course.name }}
</li>
</ul>
This works when I load my page. However, I have a form to create a NEW course, which also works. However, after this has been successfully submitted, the navbar will not contain the class until I completely reload the page. This is my controller which creates a new course.
controllers.controller('CreateCourseController', ['$scope', '$http',
function($scope, $http) {
$scope.form_data = {};
$scope.submitForm = function() {
$http.post('/api/courses', $scope.form_data).
success(function(data) {
// here, I want to add this item into the navbar selection somehow
});
}
}
]);
what would be the best way in angular to add this newly added class into the navbar, cleanly?
You could use $broadcast to send a message that the nav needs to be updated and use $on to listen for the event.
See: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Maybe something like this:
var controllers = angular.module('controllers', []);
controllers.controller('NavbarController', ['$scope', '$http',
function ($scope, $http) {
var updateNav = function() {
$http.get('/api/courses')
.success(function(data) {
$scope.courses = data.objects;
});
};
// Init
updateNav();
// Subscribe
$scope.$on('nav:updated', updateNav() );
}]);
controllers.controller('CreateCourseController', ['$scope', '$http',
function($scope, $http) {
$scope.form_data = {};
$scope.submitForm = function() {
$http.post('/api/courses', $scope.form_data).
success(function(data) {
// here, I want to add this item into the navbar selection somehow
$scope.$broadcast('nav:updated');
});
}
}]);
I want to use a dependency in listener but the websocket was undefined
$rootScope.$on('websocket.connected', function() {
$websocket.request(.....).then();
});
and a want to call a service method (who depend on asyncron method) when it ready
app.controller('MyCtrl', function(myServ, $log) {
myServ.getInfos();
});
thank you.
Code in jsfiddle http://jsfiddle.net/8DHfY/3/ or here
var app = angular.module('myApp', ['myServ'])
.config(['$websocketProvider', function ($websocketProvider) {
$websocketProvider.setHost('ws://echo.websocket.org/');
}])
.controller('MyCtrl', function(myServ, $log) {
$log.log('I want to call myServ.getInfos() from a controler');
});
angular.module('myServ', ['websocket']).service('myServ', ['$log', '$rootScope', '$websocket', function($log, $rootScope, $websocket) {
$log.error('websocket is %o ... ???', $websocket); // return undefined
$rootScope.$on('websocket.connected', function() {
$log.error('websocket is still %o', $websocket); // return undefined
});
return {
getInfos: function() {
$websocket.request(JSON.stringify({'key': 'value'}));
}
};
}]);
angular.module('websocket', []).provider('$websocket', [function() {
var _this = this;
_this.host = '';
_this.connection = null;
_this.setHost = function(host) {
this.host = host;
return this;
};
_this.request = function(request) {
//request method for websocket
};
this.$get = ['$log', '$rootScope', function($log, $rootScope) {
_this.connection = new WebSocket(this.host);
_this.connection.onopen = function(){
$log.log('Websocket connected to %s', _this.host);
$rootScope.$emit('websocket.connected');
};
}];
}]);
Providers invoke the $get function upon injection and use the singleton of whatever is returned from that function.
This means since you do not return anything from the $get function, it uses undefined.
Here's an updated fiddle: http://jsfiddle.net/8DHfY/4/
this.$get = ['$log', '$rootScope', function($log, $rootScope) {
_this.connection = new WebSocket(this.host);
_this.connection.onopen = function(){
$log.log('Websocket connected to %s', _this.host);
$rootScope.$emit('websocket.connected');
};
return _this;
}];