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);
        };
     }
});

我如何在元素之前预备html标记

1 个答案: