AngularJs - How to use method of one controller in multiple controllers? - angularjs

Question

I am bit new to AngularJS.
Here is my code:
table.js
.controller('ModalDemoCtrl', function ($scope, $rootScope, $uibModal, $log, tableService) {
$rootScope.$on("openRootDialog", function(event, html){
$scope.openDialog(html);
});
$scope.openDialog = function (html) {
// TODO: replace option dialog with your options:
var modalInstance = $uibModal.open({
animation: true,
templateUrl: html + '.html',
controller: 'ModalInstanceCtrl',
size: 'md',
backdrop: 'static',
keyboard: true,
resolve: {
content: function () {
return $scope.modalContent;
}
}
});
modalInstance.result.then(function (result) {
// Add user in you database
tableService.addUserData(result);
// Add user in your view
$scope.data.push(result)
$scope.tableEdit.reload();
});
}
})
.controller('ModalInstanceCtrl', function ($scope, $modalInstance, content) {
$scope.modalContent = content;
$scope.ok = function () {
$modalInstance.close($scope.user);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
})
//user
.controller('tableUserCtrl', function($scope, $rootScope, $uibModal, $log, $filter, $sce, ngTableParams, tableService) {
//var data = tableService.data;
var selfUser = this;
$scope.data = [];
//selfUser.obj = null;
var promise = tableService.getUserData();
promise.then(
function(payload) {
$scope.data = payload.data;
$scope.tableEdit = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: $scope.data.length, // length of data
getData: function($defer, params) {
//$defer.resolve(selfUser.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
//sorting
var orderedData = params.sorting() ? $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;
//filtering
orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
//orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
//params.total(orderedData.length);
//$defer.resolve(orderedData);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
},
function(errorPayload) {
$log.error('failure loading movie', errorPayload);
});
//to update data
$scope.updateUser = function(w) {
tableService.updateUserData(w);
}
$scope.removeUser = function(id, w) {
tableService.removeUserData(id)
//alert(JSON.stringify($scope.data))
$scope.data.splice($scope.data.indexOf(w), 1);
$scope.tableEdit.reload();
//alert(JSON.stringify($scope.data))
}
$scope.openUserDialog = function(html) {
$rootScope.$emit("openRootDialog", {});
}
})
view.html
<div class="container" data-ng-controller="tableUserCtrl">
<!--<div class="p-t-0" data-ng-controller="ModalDemoCtrl"> -->
<script type="text/ng-template" id="adduser.html">
<div class="modal-header">
<!--<h4 class="modal-title">Add User</h4>-->
</div>
<form role="form" ng-submit="insertInfo(userInfo);" name="userForm" novalidate>
<div class="modal-body m-l-15">
<div class="row">
<div class="form-group fg-float m-b-30">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input" name="name" ng-model="user.name" required="">
<label class="fg-label">Name</label>
</div>
<div ng-show="userForm.$submitted || userForm.name.$touched">
<div ng-show="userForm.name.$error.required" class="error">This field is required.</div>
</div>
</div>
...
</div>
</div>
<div class="modal-footer">
<button class="btn btn-link" ng-click="ok(user);" ng-disabled="userForm.$invalid">Submit</button>
<button class="btn btn-link" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button class="btn btn-default pull-right" ng-click="openUserDialog('adduser')">Add User</button><br/><br/>
<!--</div>-->
<div class="card">
<div class="card-header">
<h2>Users <small></small></h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table ng-table="tableEdit" class="table table-striped table-vmiddle" show-filter="true">
<tr ng-repeat="w in $data" ng-class="{ 'active': w.$edit }">
<td data-title="'Name'" filter="{ 'name': 'text' }" sortable="'name'">
<span ng-if="!w.$edit">{{ w.name }}</span>
<div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.name" /></div>
</td>
...
<td data-title="'Actions'">
<button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true"><i class="zmdi zmdi-edit"></i></button>
<button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="removeUser(w.user_id, w)"><i class="zmdi zmdi-close"></i></button>
<button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false; updateUser(w)"><i class="zmdi zmdi-check"></i></button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
I am passing html template name in openUserDialog function from view as I need to use that name in openDialog function written in ModalDemoCtrl so I can use dynamic templates in modal.
I have searched a lot but couldn't get exact things that how can I pass args to openRootDialog from openUserDialogfunction written in tableUserCtrl?
can anyone please help me? is there any syntax issue? I don't have any idea about $emit, $on etc. as am using it first time.

Answer 1

Use $rootscope,
this is example:
app.run(function($rootScope) {
$rootScope.someMethod=function(){
//do staff
}
}
in another controller just use $scope.someMethod(), in view someMethod().
it is global method now.