Javascript 在不呈现的角度数据表中包含模板

我正在使用插件将数据表添加到我的项目中。在这里，我有一个列

Actions

，我想在其中添加一些按钮。为此，我使用在同一页面上定义的ng模板问题是模板并不总是渲染。它有时显示按钮，有时不显示。我搜索后，它从不显示按钮

控制器

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
        url: '/api/department',
        type: 'GET'
    })
    .withDataProp('data')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withOption('createdRow', function (row, data, dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element(row).contents())($scope);
    })
    .withBootstrap();
$scope.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('name').withTitle('Name'),
    DTColumnBuilder.newColumn('actions').withTitle('Actions').withOption("searchable", false)
];

查看

<script type="text/ng-template" id="actions.html">
     <button class="btn btn-primary btn-xs" ng-click="edit()"><i class="fa fa-edit"></i> Edit</button>
     <button class="btn btn-danger btn-xs" ng-click="delete()"><i class="fa fa-trash"></i> Delete</button>
</script>
<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="DepartmentsController">
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">Departments</h1>
    </div>
    <div class="wrapper-md">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">
                        <button class="btn m-b-md btn-md btn-primary " ui-sref="manager.departments.create">
                            <i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">Add Department</span></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 m-b-xs">
                        <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped b-t b-b">
                            <thead>
                                <tr>
                                    <th style="width:20%">ID</th>
                                    <th style="width:60%">Name</th>
                                    <th style="width:20%">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

编辑
删除
部门
添加部门
身份证件
名称
行动

Laravel服务器端的控制器

public function index() {
    $departments = Department::company($this->company->id)
            ->select("departments.id", "departments.name");

    return \Datatables::of($departments)
            ->add_column("actions", function($row) {
                return '<div ng-include src="\'actions.html\'"></div>';
            })
            ->make(true);
}

公共功能索引（）{
$departments=部门：：公司（$this->company->id）
->选择（“departments.id”、“departments.name”）；
return\Datatables:：of（$departments）
->添加列（“操作”，函数（$row）{
返回“”；
})
->使（真实）；
}

---

我相信这是一些同步问题。但是，我没有任何进展。

你真的成功插入了模板吗？我能让

$compile（angular.element（row.contents（））（$scope）

工作的唯一方法是当

由

ng repeat

预构建或呈现时

这里，jQuery AJAX中延迟注入的HTML需要替换为包含绑定的

ng模板

，我认为

$scope.$apply（）

是唯一的解决方法：

.withOption（'createdRow'，函数（行、数据、数据索引）{
$scope.$apply（$compile（angular.element（row.contents（））（$scope））
})

适合我->

---

我真傻。同样可以在一个简单的

$timeout

中完成

$timeout(function() {
   $compile(angular.element(row).contents())($scope)
})

---

它起作用了。谢谢$scope.$apply是否会导致性能问题？@ShashankJain，不客气，谢谢你接受答案。但我有点傻。请参阅更新。

$timeout

应该足够了。毕竟，我们想要的只是确保

$compile

在以后的摘要中执行。。但是要回答您的问题-不，我不认为在初始化dataTable之后，一个

$apply

会导致任何性能问题。多次触发的multiple

$apply

非常糟糕。但是，在这里，$scope.$apply在创建每一行时都会被调用。所以，如果表中有50行，这将被调用50次。@ShashankJain，是的，但只有一次。数据表负责呈现

（无

ng repeat

），因此必须在数据表内部节点上执行

$compile

。