使用隔离范围对象

Question

我正在尝试使用指令添加角度数据表。我试图在指令中添加dt-options，基于在属性中传递的参数，然后将其设置为添加到元素的部分html。

问题1：我无法将创建的dtoption（第34行）对象绑定到elem.append中的datatable dt-options属性。

我尝试了很多选择，似乎没有任何工作，因此要求大师们提供一些知识。

"use strict";
angular.module('app.wizard').directive('table', function ( DTOptionsBuilder, DTColumnBuilder, $rootScope, common, $compile) {
return {
    restrict: 'E',
    templateUrl: 'app/table-tpl.html',
    scope: {
        formname: '@formname',
        dtoptions: '@'
    },
    link: function (scope, elem, attr) {
       var dtOption = DTOptionsBuilder.fromFnPromise(function (formName) {
            return $resource(url).query().$promise;
        })
       .withOption('createdRow', function (row, data, dataIndex) {                  
                $compile(angular.element(row).contents())(scope);
            })
            .withOption('headerCallback', function (header) {
                if (!scope.headerCompiled) {
                    scope.headerCompiled = true;
                    $compile(angular.element(header).contents())(scope);
                }
            })
             .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                   "t" +
                   "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
               .withBootstrap()
            .withPaginationType('full_numbers');

        scope.dtoptions = dtOption;
        //not working
        elem.append('<table datatable dt-options="scope.dtoptions" class="table table-striped table-bordered table-hover" width="100%"></table>');
        //not working
        elem.append('<table datatable dt-options="{{scope.dtoptions}}" class="table table-striped table-bordered table-hover" width="100%"></table>');
        $compile(elem.contents())(scope);
    }
  }
});