我如何在元素前预置 html 标签

Question

我有一个页面，最初带有按钮，然后是 table（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);
        };
     }
});

我如何在元素前预置 html 标签

How I can prepand an html tag before an element

javascript

angularjs

angularjs-directive