Javascript 如何使用按钮在网格上添加gridster项？

因此，我使用的是Gridster Angular指令（），我的视图中有一个带有三个框的网格：

<div gridster="gridsterOpts">
    <ul id="gridster-ul">
        <li gridster-item id="box1" row="0" col="0" size-x="3" size-y="2"></li>

        <li gridster-item id="box2" row="0" col="3" size-x="3" size-y="2"></li>

        <li gridster-item id="box3" row="3" col="0" size-x="6" size-y="1"></li>
    </ul>
</div>

my

控制器中的功能：

$scope.addWidget = function() {
        console.log("add1");
        $("#gridster-ul").addClass('gridster-item');
    }

控制台没有任何错误。问题是它没有添加新的
项
。我怎样才能解决这个问题

谢谢。
我建议使用Instead，我认为该解决方案仍然会导致相同的问题……也许我不太了解您。在哪里添加项目？我只看到添加class
gridster项
。这就是问题所在，我不知道如何添加
$scope.addWidget = function() {
        console.log("add1");
        $("#gridster-ul").addClass('gridster-item');
    }