带有Angularjs的可调整大小的列_Angularjs

带有Angularjs的可调整大小的列

angularjs

带有Angularjs的可调整大小的列,angularjs,Angularjs,我有两列我想调整大小（一列变宽，另一列变窄），但我真的不知道该怎么做。我已经摆好了这把小提琴：目前我有三列，其中一列名为“handle”，位于其他列的上方（z-index） //left col #content { position:absolute; left:0; right:250px; bottom:30px; top:50px; background:red; z-index:0; overflow-y:scroll; } //right col

我有两列我想调整大小（一列变宽，另一列变窄），但我真的不知道该怎么做。我已经摆好了这把小提琴：

目前我有三列，其中一列名为“handle”，位于其他列的上方（z-index）

//left col
#content {
  position:absolute;
  left:0;
  right:250px;
  bottom:30px;
  top:50px;
  background:red;
  z-index:0;
  overflow-y:scroll;
}

//right col
#menu {
  position:absolute;
  right:0;
  top:50px;
  width:250px;
  bottom:30px;
  background:#yellow;
}

#handle {
  position:absolute;
  right:250px;
  top:50px;
  width:10px;
  bottom:30px;
  background:blue;
  cursor: col-resize;
  z-index:5;
}

我的指令目前在小提琴上是空的-我如何才能将指令中的两列div作为目标，以便在拖动handle div时可以更改两列的宽度

var myApp = angular.module('myApp', []);

myApp.directive("draggable", function(){
    return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              element.on('click', function () {
                  //do something here
              });
          }
      };
});

这可能不是你想要的。但在我的应用程序中，它运行得相当好

该指令是此jquery插件的包装器：

它通过使用

表

布局而不是div来工作

有关angular的指令是：

myApp.directive('colResizeable', function() {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      setTimeout(function() {
        elem.colResizable({
          liveDrag: true,
          gripInnerHtml: "<div class='grip'></div>",
          draggingClass: "dragging",
          onDrag: function() {
            //trigger a resize event, so width dependent stuff will be updated
            $(window).trigger('resize');
          }
        });
      });
    }
  };

myApp.directive（'colResizeable'，function（）{
返回{
限制：“A”，
链接：功能（范围、要素）{
setTimeout（函数（）{
可调整大小的元素({
真的，
gripinnertml:“”，
拖动类：“拖动”，
onDrag:function（）{
//触发一个调整大小事件，这样依赖于宽度的内容将被更新
$（window.trigger（'resize'）；
}
});
});
}
};

html部分是：

<body>
  <table style="width: 100%;height:300px" col-resizeable>
    <tr>
      <td style="background:red">content</td>
      <td style="background:blue;width:100px">menu</td>
    </tr>
  </table>
</body>


内容
菜单

还可以看看css。（本例中随机生成夹点/手柄图标）

工作插销是

您必须为此指令在超时函数中设置值

myApp.directive('colResizeable', function() {
return {
restrict: 'A',
link: function(scope, elem) {
  setTimeout(function() {
    elem.colResizable({
      liveDrag: true,
      gripInnerHtml: "<div class='grip'></div>",
      draggingClass: "dragging",
      onDrag: function() {
        //trigger a resize event, so width dependent stuff will be updated
        $(window).trigger('resize');
      }
    });
  //set timeout value
  }, 1000);
}
};

myApp.directive（'colResizeable'，function（）{
返回{
限制：“A”，
链接：功能（范围、要素）{
setTimeout（函数（）{
可调整大小的元素({
真的，
gripinnertml:“”，
拖动类：“拖动”，
onDrag:function（）{
//触发一个调整大小事件，这样依赖于宽度的内容将被更新
$（window.trigger（'resize'）；
}
});
//设置超时值
}, 1000);
}
};

因为有一段时间该指令在没有超时的情况下无法工作

你是指指令部分吗？这就是我被卡住的地方-任何指针都是有用的。你有动态创建的表（

）的解决方案吗？有来自async request@maingue的数据吗？