Category / Section
How to open dialog from another controller function using angular js
1 min read
Description:
When there is two different ng-controller one with a Dialog component and the other controller to open the dialog explicitly. To open the Dialog from other controller, we need to use ‘ng-include’ directive, ‘$includeContentLoaded’ event and ‘$broadcast’ service.
Solution:
- Create a ng-controller for rendering ejDialog control with angular binding.
<div class="control" ng-controller="Dialog_ctrl"> <div id="basicDialog"> <label>Name</label> <!--Angular is binded via model value "user.name"--> <input id="name1" type="text" ng-model="user.name" /> <label>City</label> <!--Angular is binded via model value "user.city"--> <input id="address1" type="text" ng-model="user.city" /> <table> <tr> <td class="pad"> <!--On clicking the button updates the datasource--> <input id="btn1" type="button" value="Submit" ej-button ng-click="press(user)" /> </td> <td class="pad"> <!--On clicking the button close the dialog--> <input id="btn2" type="button" value="Cancel" ej-button /> </td> </tr> </table> </div> </div>
- Create another ng-controller with angular binding and using “ng-include” directive add the “basigDialog.html”(File name of the other controller). Please refer the following code snippet.
[HTML] <html xmlns="http://www.w3.org/1999/xhtml" ng-app="DialogCtrl"> <head> <!--Required scripts here --> </head> <body> <div ng-controller="basic_controller"> <input class="e-btn" type="button" style="display: block" ng-click="call_otherctrl()" id="btnOpen" value="Click to open dialog" ej-button e-click="dialogOpen" /> </div> <div> <div ng-include="'basicDialog.html'"></div> </div> </body> </html>
- Now to check whether any external resources added, bind $includeContentLoaded event that is emitted every time a component is included to the controller. Define script to initialize dialog control in it.
- Using $broadcast service bind the event for the child controllers. So that you can open the Dialog from this controller.
[Script] var obj; // declaration var myApp = angular.module('DialogCtrl', ['ejangular']); myApp.controller('basic_controller', function ($rootScope) { $rootScope.$on('$includeContentLoaded', function () { $("#basicDialog").ejDialog({ width: 550, height: 300, showOnInit: false, enableModal: true, title: "User Information" }); $rootScope.call_otherctrl = function () { $rootScope.$broadcast('Dialog_open'); } }); }); myApp.controller('Dialog_ctrl', ['$scope', function ($scope) { $scope.user = {}; $scope.user.name = "User"; $scope.user.city = "City"; // angular binding for the other controller $scope.$on('Dialog_open', function (event) { obj = $(".e-dialog.e-js.e-widget-content").data("ejDialog"); if (obj) obj.open(); // broadcast calls this event }); $scope.press = function (user) { if (obj) obj.close(); } }]);
In the above sample, we have 2 controllers separately and initiated control from controller by referring the external resource. Find the sample from the below,