Articles in this section
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:

  1. 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>

 

  1. 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>
  1. 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.
  2. 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,

 

Sample link

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied