How create datatables dynamically on button click in Angular Datatable?

Question

I am currently using angular data table in my project & I want to create a data table dynamically in a second form by taking the input's from first form fields & on on clicking the submit button of first form.

Currently I am having two controllers. One controller for each form. I am able to broadcast my 1st form submit using $scope.$broadcast in 1st controller & is able to capture the broadcast event in 2nd controller. But somehow I am not able to create the data table in 2nd controller without initializing the data table in the beginning of 2nd controller. I mean I have to create the data table in 2nd controller when my page loads & do a dtInstance.rerender() when 1st form is submitted. But I don't want to create the data table when my page loads. In fact I want to create it only when user enters some data in 1st form & submit the click event.

Answer 1

use ng-if directive. Wrap dataTable directive inside the ng-if directive. dataTable directive executed only when the condition passes.

<div ng-if="FirstFormSubmitted" > <dataTable></dataTable> </div>

Answer 2

Instead of using $scope.$broadcast, how about making both of your controllers to directives? Have the first form directive pass whatever attributes or objects you need to the second directive/controller over isolate scope, and then the second directive can dynamically change based on the values passed through.

A simple example:

(function() {
    function DataTable2() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'data-table-2.html',
            controller: 'DataTable2Ctrl',
            controllerAs: 'ctrl',
            bindToController: true,
            scope: {
                data: '='
            }
        };
    }

    angular.module( 'myApp' ).directive( 'DataTable2', DataTable2);
})();

and then the HTML would look something like...

<data-table-1 data="ctrl.whatever"></data-table-1>
<data-table-2 data="ctrl.whatever"></data-table-2>

Doing it this way lets you pass only what you need back and forth, without muddying up your valuable $scope broadcasts.