We Keep Coding

how to pass back the data from dialog to controller in angularjs?

below is my first controller
.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService',
function ($scope, deConfigService, ngDialog, $state, notificationService) {
$scope.loadDetails = function () {
....
};
$scope.openModal = function () {
var newClassDialog = ngDialog.open({
template: 'views/modals/newClassModal.html',
closeByEscape: false,
controller: 'newClassController',
className: 'ngdialog-theme-default',
width: 600
});
newClassDialog.closePromise.then(function (data) {
console.log(data);
if (data.passBackData.value === 2) {
$scope.loadDetails();
// $state.go('app.config', {}, {reload: true, inherit: false});
// $scope.loadDetails();
}
});
};
}])
In my second controller am trying to send some data to my parent controller as shown below
.controller('newClassController', ['$scope', 'ngDialog', 'deConfigService', 'notificationService',
function ($scope, ngDialog, deConfigService, notificationService) {
$scope.classObj = {};
var passBackData = [];
$scope.cancel = function () {
passBackData.push({'closeVal': 1});
console.log(passBackData);
ngDialog.close(1, passBackData);
};
$scope.create = function (isFormValid) {
if (isFormValid) {
$scope.classObj.added_dt = (new Date()).toISOString();
$scope.classObj.class_id = 0;
deConfigService.createClass($scope.classObj, function (response) {
if (response.data) {
console.log(response.data);
passBackData.push(response.data.data);
notificationService.addSuccess('Class created successfully');
}
else {
notificationService.addError('Error!! Please try later');
}
});
ngDialog.close(1, 2);
}
};
}])
below is the ngdialog html. It has 2 textbox which am able to get data to my second controller but not able to send response back to first controller
<form ng-submit="create(form.$valid)" name="form" novalidate="">
<div class="form-flex ng-pristine ng-invalid ng-touched">
<div class="form-tile">
<label>Class name </label>
<input type="text" ng-model="classObj.name" name="form.name" placeholder="Enter the name of your class" required>
<label>Class description</label>
<textarea ng-model="classObj.description" name="form.description" placeholder="Enter a short description" rows="5" required></textarea>
</div>
</div>
<button type="submit" ng-click="submittedForm = true;" ng-disabled="form.$invalid" class="mat-raised-button-blue"> Create </button>
<button class="mat-raised-button" style="float:right; width:155px" ng-click="cancel();"> Cancel </button>
</form>
Am pushing some objects to the array and trying to send but not able to receive it from parent controller.
Where am doing wrong?

After a closer read of the documentation, it looks like you need to call .close() passing the id of the dialog and the value to return from the dialog's controller. In your parent controller the object passed back to your closePromise callback has id and value properties. You'll need to get whatever you're passing back via the value property (i.e. data.value.whateverYouAreReturning). Here is a simple example that returns an object with a single string property.
angular.module('app', ['ngDialog'])
.controller('ctrl', ($scope, ngDialog) => {
$scope.returnedValue = "";
$scope.openModal = function() {
var newClassDialog = ngDialog.open({
template: 'dialogTemplate',
closeByEscape: false,
controller: 'dialogCtrl',
className: 'ngdialog-theme-default',
width: 600
});
newClassDialog.closePromise.then(function(data) {
$scope.returnedValue = data.value.result;
});
};
})
.controller('dialogCtrl', ($scope, ngDialog) => {
var id = ngDialog.getOpenDialogs()[0];
$scope.returnValue = "";
$scope.close = () => {
ngDialog.close(id, { result: $scope.returnValue });
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/js/ngDialog.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog-theme-default.min.css">
<div ng-app="app" ng-controller="ctrl">
<button ng-click="openModal()">Open Modal</button>
<p>Returned from dialog: {{ returnedValue }}</p>
<script type="text/ng-template" id="dialogTemplate">
<h1>ngDialog Sample</h1>
<p>
<label>Enter a value to return: </label>
<input type="text" ng-model="returnValue" />
</p>
<p><button ng-click="close()">Close</button></p>
</script>
</div>

This might work (can't test it unless you can share a plunker):
.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService',
function ($scope, deConfigService, ngDialog, $state, notificationService) {
$scope.loadDetails = function () {
....
};
$scope.openModal = function () {
$scope.newClassDialog = ngDialog.open({
template: 'views/modals/newClassModal.html',
closeByEscape: false,
controller: 'newClassController',
className: 'ngdialog-theme-default',
width: 600
});
$scope.newClassDialog.closePromise.then(function (data) {
console.log(data);
if (data.passBackData.value === 2) {
$scope.loadDetails();
// $state.go('app.config', {}, {reload: true, inherit: false});
// $scope.loadDetails();
}
});
};
}])
and in the other controller:
.controller('newClassController', ['$scope', 'ngDialog', 'deConfigService', 'notificationService',
function ($scope, ngDialog, deConfigService, notificationService) {
$scope.classObj = {};
var passBackData = [];
$scope.cancel = function () {
passBackData.push({'closeVal': 1});
console.log(passBackData);
$parent.$scope.newClassDialog.close(1, passBackData);
};
$scope.create = function (isFormValid) {
if (isFormValid) {
$scope.classObj.added_dt = (new Date()).toISOString();
$scope.classObj.class_id = 0;
deConfigService.createClass($scope.classObj, function (response) {
if (response.data) {
console.log(response.data);
passBackData.push(response.data.data);
notificationService.addSuccess('Class created successfully');
}
else {
notificationService.addError('Error!! Please try later');
}
});
$parent.$scope.newClassDialog.close(1, 2);
}
};
}])

$http request returns data only if I wrap inside a $timeout

I have a problem here, whenever I am clicking the button which is inside the component, I see that I am making the $http call and I don't get the response in the console, but in browser I see the call is made.
It consoles the data only when I uncomment the $timeout function.
JS
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, $http, $timeout, function($scope, $http, $timeout) {
$scope.navigate = function () {
$scope.getStats();
}
$scope.getStats = function () {
//$timeout(function () {
$http
.get('/scripts/controllers/fda/appSvc.json')
.then(function (response) {
console.log(response.data);
}, function (error) {
console.log(error);
})
//}, 0)
};
$scope.detailedTableCtrl = {
navigate: $scope.navigate
}
}]);
app.component("myBox", {
bindings: {
'detailedTableCtrl': '='
},
controller: function($element) {
},
controllerAs: 'myBox',
templateUrl: "/template",
transclude: true
})
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<my-box detailed-table-ctrl="detailedTableCtrl"></my-box>
</div><!--end app-->
<!--mybox component-->
<button class="btn btn-default btn-sm" ng-click="myBox.detailedTableCtrl.navigate()">
<span class="glyphicon glyphicon-chevron-left"></span>
<span>Back</span>
</button>

As #Amy pointed out i don't see $http service injected. Also please do use service to consume data and inject the service in controller. Your controller shouldn't worry about calling/consuming data.
<!-- Controller to get data from the Service or Factory ( pay attention to service injection here ) -->
app.controller('mainCtrl', ['$scope', 'dataService', function($scope,dataService) {
dataService.getData().then(function(response) {
$scope.response = response.data;
}, function(error) {
$scope.error = error;
$scope.response = [];
});
});
<!-- Factory to handle your data from REST or JSON -->
(function () {
"use strict";
app.factory("dataService",['$http', function($http){
function getData (){
return $http.get('/scripts/controllers/fda/appSvc.json');
}
return {
getData : getData
};
}]);
})();

AngularJS: use $broadcast to hide table columns

I am trying to use the angularjs $broadcast property to hide my table columns. If the data is broadcasted the table column should be shown else the table column should be hidden. Currently if i run my code, once login i broadcasted my login username to the function but still my whole table is not showing. Can i know a way to solve it.
This is my controller.js code:
.controller('AllMovieController',
[
'$scope',
'dataService',
'$location',
'$rootScope',
function ($scope, dataService, $location, $rootScope){
$scope.noteEnabled = false;
$scope.movies = [ ];
$scope.movieCount = 0;
$scope.currentPage = 0; //current page
$scope.entryLimit = 20; //max no of items to display in a page
var getAllMovie = function () {
dataService.getAllMovie().then(
function (response) {
$scope.$on("passuser", function ($event, data ){
if(data){
$scope.movies = response.data;
$scope.showSuccessMessage = true;
$scope.successMessage = "All movie Success";
$scope.noteEnabled = true;
}else{
$scope.movies = response.data;
$scope.noteEnabled = false;
}
});
},
function (err){
$scope.status = 'Unable to load data ' + err;
}
); // end of getStudents().then
};
$scope.numberOfPages = function(){
return Math.ceil($scope.movies.length / $scope.entryLimit);
};
getAllMovie();
}
]
)
This is my partial html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th ng-show="noteEnabled">Notes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies | pagination: currentPage * entryLimit |
limitTo: entryLimit">
<td>
{{movie.title}}
</td>
<td>
{{movie.description}}
</td>
<td data-ng-click="selectFilmDetails($event,movie)" ng-show="noteEnabled" >
{{movie.comment}}
</td>
</tr>
</tbody>
</table>
This is the broadcasted controller code:
.controller('LoginController',
[
'$scope',
'dataService',
'$location',
'$window',
'$rootScope',
function ($scope, dataService, $location, $window, $rootScope){
$scope.check_login = function($event,userID,passwd){
dataService.login(userID,passwd).then(
function (response){
if(response.result.status=='ok'){
$scope.user = response.user;
$rootScope.$broadcast("passuser", $scope.user);
$location.path('#/home');
//$window.location.reload();
}else{
$scope.message = response.result.message;
}
},
function (err) {
$scope.status = 'unable to connect to data' + err;
}
);
}//end of function check_login
}
]
)
Previously, i used session to check whether the user is logged in, but now i am using broadcast to pass the username to the controller. And the same i tried to pass the username to this controller its not working. I really need a help on this. Thanks in advance.

I would recommend moving your event listener outside the .then() of your getAllMovie() service call. What happens if the passuser event is broadcast before that promise resolves? Here's how I would recommend restructuring your code (I removed the modules you were injecting, but not using):
Update: The issue may be that your controller that has the event listener isn't instantiated when you are broadcasting the event. This is a guess because it's unclear if these are one view, different views, etc. I would suggest storing the logged in status in a value instead. This is just one example - it may not be the best way or one that will address all of what you need. I haven't tested this so you may have to play around with it to get it to work the way you want. Here is my updated recommended code:
.value('UserInfo', { user: '', loggedIn: false })
.controller('LoginController',
['$scope', 'dataService', '$location', 'UserInfo',
function ($scope, dataService, $location, UserInfo) {
$scope.check_login = function($event,userID,passwd) {
dataService.login(userID,passwd).then(
function (response){
if(response.result.status=='ok'){
UserInfo.user = response.user;
UserInfo.loggedIn = true;
$location.path('#/home');
} else {
$scope.message = response.result.message;
UserInfo.user = '';
UserInfo.loggedIn = false;
}
},
function (err) {
$scope.status = 'unable to connect to data' + err;
UserInfo.user = '';
UserInfo.loggedIn = false;
});
}//end of function check_login
}])
.controller('AllMovieController', ['$scope', 'dataService', 'UserInfo',
function ($scope, dataService, UserInfo) {
$scope.noteEnabled = false;
$scope.movies = [];
$scope.movieCount = 0;
$scope.currentPage = 0; //current page
$scope.entryLimit = 20; //max no of items to display in a page
$scope.noteEnabled = UserInfo.loggedIn;
var getAllMovie = function () {
dataService.getAllMovie().then(
function (response) {
$scope.movies = response.data;
$scope.showSuccessMessage = true;
$scope.successMessage = "All movie Success";
},
function (err) {
$scope.status = 'Unable to load data ' + err;
});
};
$scope.numberOfPages = function() {
return Math.ceil($scope.movies.length / $scope.entryLimit);
};
getAllMovie();
}]);

ui-sref blocked from accessing controller data or view

I am having some trouble getting to the controller for my state param. I am using the correct state to link to the next view.
<td><a ui-sref="orders({customerId: cust.id})">View Orders</a></td>
In my config file I am referencing the state that name and the route params. I commented out the resolve object for now. My goal is to get into the controller then pass the correct data. Notice that I am using controllerAs
My initial thought was ({customerId: ctrl.cust.id }) However that did not change the url route.
The url is changing to match the url name but is not connecting to the controller and is not giving me the view.
(function() {
'use strict';
angular
.module('app.orders')
.config(config);
function config($stateProvider) {
$stateProvider
.state('orders',{
// params: {customerid: null},
url:'/customers:customerId',
templateUrl: './components/orders/orders.html',
controller: 'OrdersController',
controllerAs: 'ctrl',
resolve: {
customerFactory: 'customerFactory',
customerInfo: function( customerFactory, $stateParams) {
return customerFactory.getCustomers($stateParams.id);
}
}
************** my main problem is the resolve. This is blocking me from getting into the next controller. *****************
resolve: {
customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
return customerFactory.getCustomers($stateParams.id);
}]
}
})
};
})();
For now my controller is very small. I just want to connect to it. I have checked my networks tab and see GET for the files.
(function() {
// 'use strict';
angular
.module('app.orders')
.controller('OrdersController', OrdersController);
function OrdersController($stateParams) {
console.log('in');
var vm = this;
vm.title = "Customer Orders";
vm.customer = null;
}
}());
I have referenced my module in the main javascript file.
(function () {
'use strict';
angular.module('app', ['app.services',
'app.customers',
'app.orders','ui.router']);
})();
When I comment out the resolve I am able to access the controller. So I know the problem is in the resolve. Here is my service. I am making a request to a Json file with $http request and using .then
Updates Here is my refactored service call I am getting back the correct customer in the console each time.
(function() {
angular
.module('app.services',[])
.constant('_', window._)
.factory('customersFactory', customersFactory);
function customersFactory($http, $log) {
return {
getCustomers: getCustomers,
getCustomer: getCustomer
};
function getCustomers(){
return $http.get('./Services/customers.json',{catch: true})
.then(getCustomerListComplete)
.catch(getCustomerListFailed);
function getCustomerListComplete(response) {
console.log('response.data',response.data);
return response.data;
}
function getCustomerListFailed(error) {
console.log('error', error);
}
}
function getCustomer(id) {
var url = './Services/customers.json';
return $http.get(url, {
catch: true
})
.then(function(response) {
console.log('promise id',id);
var data = response.data;
for(var i =0, len=data.length;i<len;i++) {
console.log('data[i].id',data[i].id);
if(data[i].id === parseInt(id)) {
console.log('data[i]', data[i]);
return data[i];
}
}
})
}
}
}());

There is a working example with your code
It is very hard to guess what is wrong. Based on suggestion I gave you here Have a expression error in ui-sref ... your code seems to be completely valid.
I placed your stuff into this app.orders.js file (the ONLY change is templateUrl path, just for plunker purposes):
angular
.module('app.orders', ['ui.router'])
'use strict';
angular
.module('app.orders')
.config(['$stateProvider', config]);
//config.$inject = ['$stateProvider'];
function config($stateProvider) {
$stateProvider
.state('orders',{
// params: {customerid: null},
url:'/customers:customerId',
//templateUrl: './components/orders/orders.html',
templateUrl: 'components/orders/orders.html',
controller: 'OrdersController',
controllerAs: 'ctrl'
// resolve: {
// customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
// return customerFactory.getCustomers($stateParams.id);
// }]
// }
})
};
// 'use strict';
angular
.module('app.orders')
.controller('OrdersController', OrdersController);
OrdersController.$inject = ['$stateParams'];
function OrdersController($stateParams) {
console.log('in');
var vm = this;
vm.title = "Customer Orders " + $stateParams.customerId;
vm.customer = null;
}
And this is the working template components/orders/orders.html:
<div >
<h3>current state name: <var>{{$state.current.name}}</var></h3>
<h5>title</h5>
<pre>{{ctrl.title}}</pre>
...
When I call it like this:
<li ng-repeat="cust in [{id:1}, {id:2}]"
><a ui-sref="orders({customerId: cust.id})">View Orders - cust ID == {{cust.id}}</a>
</li>
Check it in action here

So, whil my previous answer was about make the state working without resolve, now we will observe few adjustments (and one fix) to make even resolve working.
There is a working plunker, extending the previous one.
FIX
The only fix, the most important change come from this definition:
angular
.module('app.services',[])
.factory('customersFactory', customersFactory);
see the plural in the factory name, the 'customersFactory'. While here:
...my main problem is the resolve. This is blocking me from getting into the next controller....
resolve: {
customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
return customerFactory.getCustomers($stateParams.id);
}]
}
we ask for 'customerFactory' (singular, no s in the middle)
Few improvements:
So, this would be our adjusted state def:
$stateProvider
.state('orders',{
// INTEGER is here used to later easily use LO_DASH
url:'/customers{customerId:int}', // int is the type
templateUrl: './components/orders/orders.html',
controller: 'OrdersController',
controllerAs: 'ctrl',
resolve: {
// wrong name with 's'
//customerId:[ '$stateParams','customerFactory',
// we use customer, because we also changed the factory
// implementation - to return customer related to
// $statePrams.customerId
customer:[ '$stateParams','customersFactory',
function( $stateParams, customersFactory) {
return customersFactory
//.getCustomers($stateParams.id)
.getCustomer($stateParams.customerId)
;
}]
}
})
Now, this is our adjusted factory, and its new method getCustomer
angular
.module('app.services', [])
.factory('customersFactory', customersFactory);
customersFactory.$inject = ['$http', '$log', '$q', '$stateParams'];
function customersFactory($http, $log, $q, $stateParams) {
return {
getCustomers: getCustomers,
getCustomer: getCustomer
};
function getCustomers() {
// see plunker for this, or above in question
}
// new function
function getCustomer(id) {
var url = "customer.data.json";
return $http
.get(url, {
catch: true
})
.then(function(response){
var data = response.data;
var customer = _.find(data, {"id" : id});
return customer;
})
;
}
}
this is our data.json:
[
{
"id" : 1, "name": "Abc", "Code" : "N1"
},
{
"id" : 2, "name": "Def", "Code" : "N22"
},
{
"id" : 3, "name": "Yyz", "Code" : "N333"
}
]
And here we have controller:
OrdersController.$inject = ['$stateParams', 'customer'];
function OrdersController($stateParams, customer) {
console.log('in');
var vm = this;
vm.title = "Customer Orders " + $stateParams.customerId;
vm.customer = customer;
}
a view to show customer
<h3>customer</h3>
<pre>{{ctrl.customer | json}}</pre>
Check it here in action

AngularJS/Angularfire Unable to splice object

When trying to remove an object using splice I get an error: TypeError: Object # has no method 'splice'
result of console.log($scope.posts[$routeParams.id]);
Object {name: "test", url: "http://google.com", $$hashKey: "005"}
my add and edit functions both work as expected. remove is similar, so I expect it to work as well.
controllers.js
/* Controllers */
hackerNews.controller('AppCtrl',
function AppCtrl ($scope, posts, angularFire) {
angularFire(posts.limit(100), $scope, 'posts');
});
hackerNews.controller('InfoCtrl',
function InfoCtrl($scope, $routeParams) {
$scope.post = $scope.posts[$routeParams.id];
});
hackerNews.controller('AddCtrl',
function AddCtrl($scope, $location, posts) {
$scope.post = [{}];
$scope.add = function () {
posts.push($scope.post);
$location.url('/');
};
});
hackerNews.controller('EditCtrl',
function EditCtrl($scope, $routeParams, $location, posts) {
$scope.post = $scope.posts[$routeParams.id];
$scope.edit = function () {
$scope.posts[$routeParams.id] = $scope.post;
$location.url('/');
};
});
hackerNews.controller('RemoveCtrl',
function RemoveCtrl($scope, $routeParams, $location, posts) {
$scope.post = $scope.posts[$routeParams.id];
$scope.remove = function () {
console.log($scope.posts[$routeParams.id]);
$scope.posts.splice($routeParams.id, 1);
$scope.toRemove = null;
$location.url('/');
};
$scope.back = function () {
$location.url('/');
};
});
app.js
/* Declare app level module */
var hackerNews = angular.module('hackerNews', ['firebase'])
.factory('posts', [function() {
var posts = new Firebase('https://xyclos.firebaseio.com/hackerNews');
return posts;
}])
.config(function($routeProvider) {
$routeProvider.when('/index', {
templateUrl: 'partials/index.html'
})
.when('/info/:id', {
templateUrl: 'partials/info.html',
controller: 'InfoCtrl'
})
.when('/add', {
templateUrl: 'partials/add.html',
controller: 'AddCtrl'
})
.when('/edit/:id', {
templateUrl: 'partials/edit.html',
controller: 'EditCtrl'
})
.when('/remove/:id', {
templateUrl: 'partials/remove.html',
controller: 'RemoveCtrl'
})
.when('/comments/:id', {
templateUrl: 'partials/comments.html',
controller: 'CommentCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
hackerNews.filter('shortURL', function () {
return function (text) {
var getLocation = function(href) {
var l = document.createElement("a");
l.href = href;
return l;
};
var url = getLocation(text);
return url.hostname;
};
});
remove.html
<p>Are you sure that you want to remove {{post.name}}?</p>
<button ng-click="remove()" class="btn btn-success btn-sm">Yes</button>
<button ng-click="back()" class="btn btn-danger btn-sm">No</button>

I got it to work, even though I am not sure if this is necessarily the best way to do this.
here is what I changed:
remove.html
<button **ng-click="posts.remove(post)"** class="btn btn-success btn-sm">Yes</button>
after that, there was no need for me to do anything in remove() except route back to index
$scope.remove = function () {
$location.url('/');
};