如何使 angular-gridster 小部件数据内容响应？

Question

我正在使用 angular-gridster 来设计动态用户仪表板。我们如何在调整小部件回调大小时使 gridster 小部件数据内容响应，有人可以建议我如何使其响应。

 <div id="gridster" >
                <div gridster="gridsterOpts">
                    <ul>
                        <li gridster-item="widget" ng-repeat="widget in DashboardControls">
                            <div class="box">
                                <div class="box-header">
                                    <h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
                                    <div class="box-header-btns pull-right">
                                        <a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
                                        <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div>                                       
                                         <img class="img-responsive"  ng-src="{{widget.ThumbnailPath}}" />
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

Answer 1

您必须创建一个嵌入到小部件中的自定义指令（或多个自定义指令）。此自定义指令可以包含响应数据并更改小部件内容的逻辑。