2016-09-06 3 views
0

각도 격자 (레이아웃 용) 및 각도 웨비 닉스 (위젯 생성 용)를 사용하여 대시 보드 레이아웃을 만들려고합니다. 필자가 직면 한 한 가지 문제는 대시 보드 페이지가 나타나면 내부적으로 모든 위젯을 두 번 다시 렌더링 할 때 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/

에서 사용할 수 있습니까?

답변

0

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