Question

我正在尝试使用angular-gridster（用于布局）和angular webix（用于创建窗口小部件）来创建仪表板布局。我面临的一个问题是，当仪表板页面出现时，webix小部件会被初始化两次，内部重新呈现所有小部件两次。下面的小提琴链接提供了一小部分应用程序

    <body>
      <div ng-controller="SampleController">
        <div gridster="gridsterOptions">
          <div class="widget-container" gridster-item="widget" ng-repeat="widget in widgets">
            <div webix-ui="widget" webix-ready='resize(root)'></div>
          </div>
        </div>
      </div>
    </body>

$(function() {
  webix.protoUI({
    "name": "SampleWidget",
    $init: function(config) {
      alert("In $init");
      this.$view.className = config.css;
      this.$view.innerHTML = "Hai";
    }
  }, webix.MouseEvents, webix.EventSystem, webix.ui.view);

  //Initialising app
  var webixApp = angular.module('webixApp', ['webix', 'gridster']);

  var gridsterOptions = {
    columns: 12,
    margins: [10, 10],
    outerMargin: false,
    mobileBreakPoint: 600,
    width: 'auto',
    colWidth: 'auto',
    minSizeY: 15,
    minSizeX: 2,
    rowHeight: 10
  };

  //controller
  webixApp.controller('SampleController', function($scope, $timeout) {
    $scope.gridsterOptions = gridsterOptions;
    $scope.widgets = [{
      view: 'SampleWidget',
      id: 'Sample',
      css: 'sample-widget'
    }];

  });
  angular.bootstrap($("body"), ["webixApp"]);
});

https://jsfiddle.net/rajisht/L3a3k624/

任何人都可以说明这个或任何修复的原因吗？

Answer 1

protoUI构造函数用于初始化自定义组件的新实例，但要在应用程序中插入自定义组件，您需要以相同的方式插入任何库时使用 webix.ui 零件。因此，如果您在控制器中添加webix.ui，如下所示，那么它将正确绑定您的protoUI并仅将其实例化一次。

webixApp.controller('SampleController', function($scope, $timeout) {
$scope.gridsterOptions = gridsterOptions;
$scope.widgets = webix.ui({
  view: 'SampleWidget',
  id: 'Sample',
  css: 'sample-widget'
});

Webix小部件与angular gridster一起使用时会实例化两次

1 个答案: