如何在Angular Datatable中单击按钮时动态创建数据表?

时间:2015-05-14 20:33:53

标签: angularjs angularjs-scope jquery-datatables

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

目前我有两个控制器。每个表单一个控制器。我可以使用$ scope广播我的第一张表格。$ 1st在第一个控制器&能够捕获第二个控制器中的广播事件。但不知何故,我无法在第二个控制器初始化数据表的情况下在第二个控制器中创建数据表。我的意思是当我的页面加载时,我必须在第二个控制器中创建数据表。提交第一个表单时执行dtInstance.rerender()。但是,当我的页面加载时,我不想创建数据表。实际上我只想在用户输入第一种形式的数据时创建它。提交点击事件。

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

不是使用$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广播。