0

我正在尝试使用角度 gridstack 框架。我正在尝试使演示代码正常工作。

这是框架的链接：

https://github.com/kdietrich/gridstack-angular

这是我的角度文件：

generalApp.controller('DashBoardcontroller', ['$scope', '$mdDialog', '$log', function ($scope, $mdDialog, $log) {


$scope.widgets = [{ x: 0, y: 0, width: 1, height: 1 }, { x: 0, y: 0, width: 3, height: 1 }];
$scope.options = {
    cellHeight: 200,
    verticalMargin: 10
};
$scope.addWidget = function () {
    var newWidget = { x: 0, y: 0, width: 1, height: 1 };
    $scope.widgets.push(newWidget);
};
$scope.moveWidget = function () {
    $scope.widgets[0].x = 1;
    $scope.widgets[0].width = 2;
    $scope.widgets[0].height = 2;
};
$scope.removeWidget = function (w) {
    var index = $scope.widgets.indexOf(w);
    $scope.widgets.splice(index, 1);
};
$scope.onChange = function (event, items) {
    $log.log("onChange event: " + event + " items:" + items);
};
$scope.onDragStart = function (event, ui) {
    $log.log("onDragStart event: " + event + " ui:" + ui);
};
$scope.onDragStop = function (event, ui) {
    $log.log("onDragStop event: " + event + " ui:" + ui);
};
$scope.onResizeStart = function (event, ui) {
    $log.log("onResizeStart event: " + event + " ui:" + ui);
};
$scope.onResizeStop = function (event, ui) {
    $log.log("onResizeStop event: " + event + " ui:" + ui);
};
$scope.onItemAdded = function (item) {
    $log.log("onItemAdded item: " + item);
};
$scope.onItemRemoved = function (item) {
    $log.log("onItemRemoved item: " + item);
};

}]);

这是我的 index.html 文件：

<div ng-app="generalApp" class="container-fluid" ng-controller="DashBoardcontroller">
<p>{{widgets}}</p>
<div>
    <a class="btn btn-primary" ng-click="addWidget()" href="#">Add Widget</a>
    <a class="btn btn-primary" ng-click="moveWidget()" href="#">Move Widget</a>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div gridstack class="grid-stack grid1" options="options" on-change="onChange(event,items)" on-drag-start="onDragStart(event,ui)" on-drag-stop="onDragStop(event,ui)" on-resize-start="onResizeStart(event,ui)" on-resize-stop="onResizeStop(event,ui)">
            <div gridstack-item ng-repeat="w in widgets" class="grid-stack-item" gs-item-x="w.x" gs-item-y="w.y"
                 gs-item-width="w.width" gs-item-height="w.height" gs-item-autopos="1" on-item-added="onItemAdded(item)" on-item-removed="onItemRemoved(item)">
                <div class="grid-stack-item-content">
                    <a class="btn btn-primary" ng-click="removeWidget(w)" href="#">remove</a>
                </div>
            </div>
        </div>
    </div>
</div>

这些库工作正常，但问题是我无法移动或调整小部件的大小。这是框架中的错误吗？我可以做些什么来移动一个小部件并调整它的大小？

亲切的问候

现场演示： http: //kdietrich.github.io/gridstack-angular/demo/

现场演示代码：https ://github.com/kdietrich/gridstack-angular/tree/master/demo

图书馆清单：

<script src="~/Scripts/Gridstack/gridstack.js"></script>
<script src="~/Scripts/Gridstack/gridstack-angular.js"></script> 
<script src="~/Scripts/Gridstack/gridstack.controller.js"></script>
<script src="~/Scripts/Gridstack/gridstack.directive.js"></script>
<script src="~/Scripts/Gridstack/gridstackitem.directive.js"></script
4

1 回答 1

0

我意识到我使用的是旧版本的 Jquery 库！我通过 nuget 包对其进行了更新，一切正常。

于 2017-12-08T09:18:23.223 回答