javascript - 如何在元素之前预先添加 html 标签

Question

我有一个页面，最初带有按钮，然后是一个表格(ag-grid)。

<div class="row"> <-- Button -->
   <button class="btn btn-sm btn-primary"
   </button>
</div>
<div class="" ag-grid="ag_grid_options" ></div> <!-- Table-- >

我想创建一个指令(一个执行某些操作的按钮)，它与上面的按钮对齐。

我创建了这个指令:

app.directive('exportData', function(){
    return {
        restrict: 'A',
        template: '<button class="btn btn-sm btn-primary"> GOD IS HERE </button>',
        link: function(scope) {

        }
    };
});

我已将 ag-grid-option 的标签修改为如下所示:

<div class="" ag-grid="ag_grid_options" export-data></div>

但是该按钮换行，而不是与前一个按钮对齐。所以我的问题是，有没有办法用上一个按钮来预先设置按钮？

我需要仅使用它作为 ag-grid 的属性。有人可以帮我吗？

Answer 1

尝试这样的事情:

app.directive('exportData', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs, model){
            element.parent().prepend('<button class="btn btn-sm btn-primary"> GOD IS HERE </button>');
        };
     }
});

更好的解决方案是创建一个包装器:

app.directive('exportData', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs, model){
            // Create a wrapper
            var wrapper = $('<div class="wrapper"></div>');
            element.wrap(wrapper);

            // Compile and attach the button
            var button = $('<button class="btn"> GOD IS HERE </button>');
            element.before(button);
        };
     }
});