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

发布时间：2020-12-17 07:07:59 所属栏目：安全来源：网络整理

导读：我正在使用 angular-ui-layout plugin 该链接是源代码,在第211行有以下代码来处理mouseup： htmlElement.on('mouseup touchend',function () { htmlElement.off('mousemove touchmove'); }); 我需要在那里打回一个回调： htmlElement.on('mouseup touchend',

我正在使用 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代码.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!