Question

我在Malhar小部件框架中工作，该框架基于jQuery可排序小部件。前/ https://github.com/DataTorrent/malhar-angular-dashboard

我正在对每个小部件进行一些DOM操作（最大化/最小化/刷新），并在下面遇到一些Angular $scope.$apply例外。

功能详情：

$scope.grabSouthResizer函数（正常工作）是框架附带的Mahlar函数;我只是稍微修改它以刷新Kendo UI charts。

$scope.maxResizer函数是我的自定义函数，每次点击$rootScope:inprog时都会抛出$scope.$apply();个异常。

$scope.grabSouthResizer = function (e) {
	var widgetElm = $element.find('.widget');

	e.stopPropagation();
	e.originalEvent.preventDefault();

	// get the starting horizontal position
	// .. code ommitted for brevity

	// sets new widget width on mouseup
	var mouseup = function (e) {

		// calculate height change
		var curY = e.clientY;
		var pixelChange = curY - initY;

		var widgetContainer = widgetElm.find('.widget-content');

		var diff = pixelChange;
		var height = parseInt(widgetContainer.css('height'), 10);
		var newHeight = (height + diff);

		$scope.widget.setHeight(newHeight + 'px');

		$scope.$emit('widgetChanged', $scope.widget);
		
		$scope.$apply(); 	// *** NO EXCEPTIONS THROWN ***

		$scope.$broadcast('widgetResized', {
			height: newHeight
		});
		
		// kendo chart - refresh height               
		var chart = widgetElm.find('.k-chart').data("kendoChart");
		if (chart != undefined) {
			chart.setOptions({ chartArea: { height: newHeight - (newHeight * .10) } });
			chart.resize($(".k-chart"));
		}
	};
	
};

$scope.maxResizer = function (e) {
	// TODO: properly restore the window to original position..      
	
	var widgetElm = $element.find('.widget');

	e.stopPropagation();        // testing - same as grabSouthResizer() below
	e.originalEvent.preventDefault();

	var pixelHeight = widgetElm.height();
	var pixelWidth = widgetElm.width();

	// fyi: '.k-tree' will auto-resize, so no need to find that
	var chart = widgetElm.find('.k-chart').data("kendoChart");
	var treelist = widgetElm.find('.k-treelist').data("kendoTreeList");
	
	// height differential (reduce height of container if inner widget is a treelist)
	var ht_diff = (chart != undefined ? 200 : 600);
	var newHeight = window.innerHeight - ht_diff;

	if (!widget.maximized) {
		// widget container maximize
		widget.maximized = true;

		$scope.widget.setWidth(window.innerWidth);
		$scope.widget.setHeight(newHeight);        //window.innerHeight - ht_diff);

		$scope.$emit('widgetChanged', widget);            
		
		$scope.$apply();  // *** THROWS $rootScope:inprog EXCEPTIONS !!! ***
	
		$scope.$broadcast('widgetResized', {
			width: window.innerWidth,
			height: newHeight      
		});            
											
		if (chart != undefined) {
			// refresh Kendo chart 
			chart.setOptions({ chartArea: { height: widgetElm.height()*.9, width: widgetElm.width()*.95 } });
			chart.resize($(".k-chart"));                    
		}		           
	}	
    kendoRefreshTimer(); // this work-around used instead of $scope.$apply()
}
var timer;
    function kendoRefreshTimer() {            
        timer = $timeout(function () {
            refreshKendo();
        }, 1);
    }        

    function refreshKendo() { 
       // Kendo chart refresh here...
    }

大问题：为什么$scope.$apply();会导致我的maxResizer函数出错，而不会导致Malhar原始grabSouthResizer函数出错？我也理解不推荐使用$scope.$apply()，但它似乎被广泛用作解决方法。

我会创建一个在线插件，但我还没有在线设置这个Malhar小部件框架。设置起来有点复杂。

感谢您的建议。

的问候，鲍勃

*更新*

我更新了我的帖子以显示我是如何使用$timeout函数解决这个scope.apply问题，但我不喜欢UI中的瞬间延迟。即你可以看到Kendo图表自己调整大小，所以它看起来不那么顺利。

Angular $ scope。$在最大化Malhar小部件时应用异常

0 个答案: