angularjs – angular-ui-layout – 添加拖动结束/面板调整大小的事件

我正在使用 angular-ui-layout plugin

链接是源代码,在第211行有以下代码来处理mouseup:

htmlElement.on('mouseup touchend',function () {
      htmlElement.off('mousemove touchmove');
    });

我需要在那里打回一个回调:

htmlElement.on('mouseup touchend',function () {
       htmlElement.off('mousemove touchmove');
       scope.onDragEnd();
    });

为了在插件外响应此事件:

<div ui-layout on-drag-end="vm.layoutResized()"> ... </div>

但是,我似乎无法对vm.layoutResized()进行必要的更改.

我尝试在一个或两个指令的范围内添加如下内容

scope: {
          onDragEnd: '&'
      }

但是没有调用vm.layoutResized().有人可以查看链接源并告诉我如何通过嵌套范围传递此函数,以便在我调用它的地方定义它?

解决方法

您将不得不修改angular-ui-layout插件/指令

在uiLayoutCtrl中添加一个函数,该函数应该在内部调用一个指令级范围变量,并且应该实际执行layoutResize.

//Method called from actual resize event
  triggerResize: function (eve) {
      $scope.resize(eve);
  }


//External facing method that will be called
  scope: {
      'resize': '&onResize'
  },//Usage
<div ui-layout on-resize="Resizefn()">

演示:http://jsfiddle.net/sjsingh/DJqfZ/1/

在此链接添加了更新的angular-ui-layout代码.

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...