如何在 Angular Datatable 中的按钮单击时动态创建数据表？答案

【问题标题】：How create datatables dynamically on button click in Angular Datatable?如何在 Angular Datatable 中的按钮单击时动态创建数据表？
【发布时间】：2015-05-14 20:33:53
【问题描述】：

我目前在我的项目中使用角度数据表，我想通过从第一个表单字段获取输入并单击第一个表单的提交按钮，以第二种形式动态创建数据表。

目前我有两个控制器。每个表单一个控制器。我能够在第一个控制器中使用 $scope.$broadcast 广播我的第一个表单提交，并且能够在第二个控制器中捕获广播事件。但不知何故，如果没有在第二个控制器的开头初始化数据表，我就无法在第二个控制器中创建数据表。我的意思是我必须在页面加载时在第二个控制器中创建数据表，并在提交第一个表单时执行 dtInstance.rerender()。但是我不想在我的页面加载时创建数据表。事实上，我只想在用户以第一种形式输入一些数据并提交点击事件时创建它。

【问题讨论】：

标签： angularjs angularjs-scope jquery-datatables

【解决方案1】：

使用 ng-if 指令。将 dataTable 指令包装在 ng-if 指令中。 dataTable 指令仅在条件通过时执行。

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

【讨论】：

【解决方案2】：

不使用$scope.$broadcast，不如让你的两个控制器都变成指令？让第一个表单指令通过隔离范围将您需要的任何属性或对象传递给第二个指令/控制器，然后第二个指令可以根据传递的值动态更改。

一个简单的例子：

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

然后 HTML 看起来像...

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

这样做可以让您只来回传递您需要的内容，而不会混淆您宝贵的$scope 广播。

【讨论】：