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

Question

我正在与 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() 不会被调用。有人可以查看链接源并告诉我如何通过嵌套作用域传递此函数，以便在我调用它的地方定义它吗？

Answer 1

您必须修改 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 代码。