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

Angularjs button click with ui router is not working

Hi I am developing angular js application. I am using ui-routing technique. I am facing issues in button click event. Below is my main.js file.
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
$stateProvider.state('ForgotPassword', {
url: '/ForgotPassword',
templateUrl: 'ForgotPassword/ForgotPassword.html',
controller: 'ForgotPassword'
});
$stateProvider
.state('ForgotPassword.ResetPassword', {
url: '/ResetPassword',
templateUrl: 'ForgotPassword/ResetPassword.html',
controller: 'ResetPassword'
});
});
});
Below is my forgotpassword.html
<div class="container">
<div ui-view></div>
</div>
Here i am injecting ResetPassword.html.
Below is my ResetPassword.html
<div class="button-container">
<input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()">
</div>
Above button does not work.
This is my Resetpasswordcontroller.
(function () {
angular.module('RoslpApp').controller('ResetPassword', ['$rootScope', '$translatePartialLoader', '$translate', function ($ResetPasswordService, $scope, $translatePartialLoader, $translate) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
})();
Resetpasswordservice.js
app.service("ResetPasswordService", function ($http, $state) {
alert("aaa");
this.ResetPassword = function () {
var url = '/api/projects/7';
return $http.post(url).then(function (response) {
return response.data;
});
}
});
$scope.ResetPassword is not working and i am not getting error also. Any help would be appreciated. Thank you.

I think your arguments are wrong, try to change it to something like this (corresponding arguments):
[
'$rootScope',
'ResetPasswordService',
'$scope',
'$translatePartialLoader',
'$translate',
function ($rootScope, $ResetPasswordService, $scope, $translatePartialLoader, $translate){
[...]
}
]

Your dependency injection order is wrong. Try this one:
(function () {
angular.module('RoslpApp').controller('ResetPassword', ['$scope', '$http', '$translatePartialLoader', '$translate', 'ResetPasswordService', function ($scope, $http, $translatePartialLoader, $translate, ResetPasswordService) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
$http.post('/api/projects/7').then(function (response) {
alert(JSON.stringify(response.data));
}, function (error) {
console.log(error);
});
}
}]);
})();
ResetPasswordService.js
angular.module('RoslpApp').service("ResetPasswordService", function ($http, $state) {
alert("aaa");
this.ResetPassword = function () {
var url = '/api/projects/7';
return $http.post(url).then(function (response) {
return response.data;
});
}
});

var myApp = angular.module("myApp", []);
myApp.controller("myController", ['$rootScope' , function( $scope){
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller= "myController">
<div class="button-container">
<input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()">
</div>
</div>
</body>
var myApp = angular.module("myApp", []);
myApp.controller("myController", ['$rootScope' , function( $scope){
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller= "myController">
<div class="button-container">
<input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()">
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller= "myController">
<div class="button-container">
<input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()">
</div>
</div>
</body>
There may be problme while passing the dependency to controller in passing the arguments to callback.I tried simple way with one arguments.its work to me.Check it

Change your code like below. Your order and reference is wrong.
angular.module('RoslpApp').controller('ResetPassword', ['$rootScope','$scope', '$translatePartialLoader', '$translate','ResetPasswordService', function ($rootScope, $scope, $translatePartialLoader, $translate,ResetPasswordService) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);

Change you ResetPassword.html code as following:
<div class="button-container">
<input type="button" value="Submit" id="input-submit" ng-click="ResetPassword()" />
</div>
Also, edit you controller as the problem is due to incorrect dependencies order. You should rewrite as:
(function () {
angular.module('RoslpApp').controller('ResetPassword', ['$ResetPasswordService','$scope', '$translatePartialLoader', '$translate', function ($ResetPasswordService, $scope, $translatePartialLoader, $translate) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
})();

Two directives referencing one variable but second directive doesn't fire on change

I have two directives that reference the same parent variable. The first directive is a dropdown. The second directive is a table. What I'm trying to accomplish is this: when a selection is made on the dropdown, the parent variable will change. The second directive using $scope.$watch will detect this change and load the data to the table. Problem is that the second directive is not detecting the change. I'm not understanding why.
// home.html
<div>
<directive-one testid="home.changevalue"></directive-one>
<br />
<directive-two testid="home.changevalue"></directive-two>
</div>
// search.directive.html
<div style="margin-top:5px;margin-left:25px;">
<div class="row" style="margin-bottom:10px;">
<label for="searchoptions" style="margin-left:15px;">Food Items</label>
<br />
<select style="margin-left:15px;" name="searchoptions" id="searchoptions1" ng-model="searchFoodItems.fooditemid" ng-change="searchFoodItems.onSelectionChange()">
<option value="">Select ...</option>
<option ng-repeat="fooditem in searchFoodItems.fooditems" value="{{fooditem.entryid}}">{{fooditem.itemdesc}}</option>
</select>
<span>Food Item ID - {{searchFoodItems.fooditemid}}</span>
</div>
</div>
// list.directive.html
<div style="margin-top:5px;margin-left:30px;">
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Discount</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr ng-repeat="row in listFoodItems.fullitemdescs">
<td>{{row.EntryId}}</td>
<td>{{row.ItemDesc}}</td>
<td>{{row.ItemDisc}}</td>
</tr>
</tbody>
</table>
</div>
JS -
// home.js
(function () {
'use strict';
angular
.module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module))
.controller(testConstants.generateName('home', testConstants.NAMETYPES.controller), home);
home.$inject = ['$scope', '$location', '$routeParams', '$q', '$window', 'logger', 'dataservice'];
function home($scope, $location, $routeParams, $q, $window, logger, dataservice) {
var home = this;
home.changevalue = '';
}
})();
// search.js
(function () {
'use strict';
angular
.module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module))
.directive(testConstants.generateName('directiveOne', testConstants.NAMETYPES.directive), searchFoodItems);
searchFoodItems.$inject = ['dataservice', 'logger'];
function searchFoodItems(dataservice, logger) {
var sfi = {
restrict: 'E',
templateUrl: 'App/search/search.directive.html',
scope: {
fooditemid: '='
},
link: function (scope, element, attrs, controller) { },
controller: searchFoodItemsController,
controllerAs: 'searchFoodItems'
}
return sfi;
}
searchFoodItemsController.$inject = ['$scope', 'dataservice', 'logger'];
function searchFoodItemsController($scope, dataservice, logger) {
var search = this;
search.fooditemid = '';
search.fooditems = [];
search.onSelectionChange = function () {
$scope.fooditemid = search.fooditemid;
}
activate();
function activate() {
loadFoodItems();
}
function loadFoodItems() {
return dataservice.getFoodItems().then(function (result) {
search.fooditems = result;
logger.log("search.directive.js = getFoodItems loaded");
});
}
}
})();
// list.js
(function () {
'use strict';
angular
.module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module))
.directive(testConstants.generateName('directiveTwo', testConstants.NAMETYPES.directive), listFoodItems);
listFoodItems.$inject = ['dataservice', 'logger'];
function listFoodItems(dataservice, logger) {
var lfi = {
restrict: 'E',
templateUrl: 'App/list/list.directive.html',
scope: {
fooditemid: '='
},
link: function (scope, element, attrs, controller) { },
controller: listFoodItemsController,
controllerAs: 'listFoodItems'
}
return lfi;
}
listFoodItemsController.$inject = ['$scope', '$q', 'dataservice', 'logger'];
function listFoodItemsController($scope, $q, dataservice, logger) {
var list = this;
list.fullitemdescs = [];
activate();
function watchFoodItem() {
$scope.$watch("$scope.fooditemid", function (value) {
$q.all([load(value)]).then(function () { logger.log('list.directive.js - fooditemid changed'); });
});
}
function activate() {
watchFoodItem();
load($scope.fooditemid);
}
function load(id) {
if (id === '') {
loadFoodItems();
}
else {
loadFoodItem(id);
}
}
function loadFoodItems() {
return dataservice.getFoodDescDiscs().then(function (result) {
list.fullitemdescs = result;
logger.log("list.directive.js = getFoodItems loaded");
});
}
function loadFoodItem(id) {
return dataservice.getFoodDescDisc(id).then(function (result) {
list.fullitemdescs = result;
logger.log("list.directive.js = getFoodItem loaded");
});
}
}
})();

Remove function and $scope from watcher.
//function watchFoodItem() {
$scope.$watch("fooditemid", function (value) {
$q.all([load(value)]).then(function () { logger.log('list.directive.js - fooditemid changed'); });
});
// }

AngularJS : Call controller function from outside with vm

Here I have :
var app = angular.module('app');
app.controller("myController", function () {
var vm = this;
vm.myFunction = function() { alert('foo'); };
});
app.animation('.animate', ["$timeout", function($timeout) {
var vm = this;
return {
addClass: function(element, className, doneFn) {
$timeout(function() {
console.log('this is displayed');
vm.myFunction(); // Doesn't work !
});
}
}
}]);
When I add a class in the template, addClass gets fired. However, vm.myFunction() doesn't, because it does not exist.
How do we do this in angular ?

Some different from yours but I thought this can help you...
in HTML
<div id="outer" ng-controller="myController"></div>
in JS
var app = angular.module('app');
app.controller('myController', function ($scope) {
$scope.myFunction = function() { alert('foo'); };
});
var scope = angular.element($("#outer")).scope();
scope.myFunction();

Modify your code as the following:
var app = angular.module('app');
app.controller('myController', function ($scope) {
var vm = this;
vm.myFunction = function() { alert('foo'); };
$scope = vm;
});
app.animation('.animate', ["$timeout", 'myController', function($timeout, myController) {
var vm = myController;
return {
addClass: function(element, className, doneFn) {
$timeout(function() {
console.log('this is displayed');
vm.myFunction(); // Doesn't work !
});
}
}
}]);

calling method from one controller to another controller in angular js

I want to call a method from one controller to another controller. There are two controllers named "header" and "mainContent". Need to call a "trigger method" in the "header Controller", After the success call of "result method" in the mainController.
If that method called that should hide that paragraph.
<div ng-controller="header">
<p ng-show="msg">Content</p>
</div>
<div ng-controller="mainContent">
</div>
var module = angular.module("sourceViewer", ['ui.router']);
//header controller
module.controller('header', function ($scope, $location) {
$scope.msg=true;
$scope.trigger= function(data) { //This method should be called after the result method called in the mainContent Controller
$scope.$on('UPDATE_CHILD', function() {
if(data)
$scope.msg=false;
});
}
});
// mainContent controller
module.controller('mainContent', function ($scope, $location, dataService) {
$scope.user = dataService.user;
$scope.signIn = function (user) {
var result = dataService.login(user);
result.success(function (data) {
if (data.message== "success") {
$scope.$broadcast('UPDATE_CHILD');
//From here I want to call trigger method of header controller
}
})
};
});

did u try this?
module.controller('header', ['$scope', '$location', '$rootScope', function ($scope, $location, $rootScope) {
$scope.msg=true;
$scope.trigger= function(data) {
if(data)
$scope.msg=false;
};
$rootScope.$on('event:fire', $scope.trigger);
}]);
// mainContent controller
module.controller('mainContent', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.user = dataService.user;
$scope.signIn = function (user) {
var result = dataService.login(user);
result.success(function (data) {
if (data.message== "success") {
$rootScope.$broadcast('event:fire');
}
})
};
}]);

You can use $rootScope like:
<div ng-controller="header">
<p ng-show="$root.header.msg">Content</p>
</div>
<div ng-controller="mainContent">
</div>
var module = angular.module("sourceViewer", ['ui.router']);
//header controller
module.controller('header', function ($rootScope,$scope, $location) {
$rootScope.header.msg = true;
});
// mainContent controller
module.controller('mainContent', function ($rootScope,$scope, $location, dataService) {
$scope.user = dataService.user;
$scope.signIn = function (user) {
var result = dataService.login(user);
result.success(function (data) {
if (data.message== "success") {
$rootScope.header.msg = true;
}
})
};
});

in the follwoing code you can see headerController is calling alert in mainController
myApp = angular.module("myApp",[]);
myApp.service("myService", function(){
showAlertBool = false;
return {
showAlert: function (value) {
showAlertBool = value;
},
canShowAlert: function () {
return showAlertBool;
}
}
});
myApp.controller("headerController", function($scope, myService){
console.log(myService);
$scope.clickHandler = function(){
myService.showAlert(true);
}
});
myApp.controller("mainController", function($scope, myService){
console.log(myService);
$scope.getServiceValue = function(){
return myService.canShowAlert();
}
$scope.$watch("getServiceValue()", function(newValue, oldValue){
if(newValue === true && newValue !== oldValue){
myService.showAlert(false);
alert("I can show Alert now!!!");
}
});
});
For a working code you can go here