通过id附加到元素不通过指令

Question

我有以下HTML：

  <div class="row list-bottom-margin" id="test">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="right-inner-addon">
        <form ng-submit="submit()">
          <input type="search"
                 class="form-control"
                 placeholder="Search..."
                 ng-model="searchText">
        </form>
      </div>
    </div>
    <!-- I want to add an element here -->
  </div>
</div>
<div ng-show="ag_grid_item_total > 0">
        <div id="ag_grid_table"
             ag-grid="::ag_grid_options"
             class="ag-bootstrap-striped" export-data> <!-- My directive -->
        </div>
      </div>

我想使用我的指令添加以下div：

<div class=""> 
    <button class="btn" ng-click="dosomething()"> test</button>
</div>

但它没有用。相反，我得到[object, object]

这是我的指示：

app.directive('exportData', function($compile){
    return {
        restrict: 'A',
        //template: '<button class="btn btn-sm btn-primary" ng-click="godFunction()"> GOD IS HERE </button>',
        link: function(scope, element, attrs, model){
            var button = $compile($('<button class="btn" ng-click="dosomething()"> <i class="fa fa-download"></i></button>'))(scope)
            document.getElementById("test").appendChild = button; // this is where i am doing DOM manipulation. which need to be changes I guess.
            scope.dosomething = function(){
                console.log("hi..");

            }
        }
     }
});