如何调整2的div VerticalBar在AngularJS [英] How to resize 2 divs with VerticalBar in AngularJS

问题描述

我找到了一个解决方案，但它使用的jQuery 的reference.html 和指令code是这样的：

  angular.module（'mc.resizer'，[]）。指令（缩放工具，函数（$文件）{    返回函数（$范围，$元，$ ATTRS）{        $ element.on（鼠标按下'，函数（事件）{
            。事件preventDefault（）;            $ document.on（'鼠标移动'，鼠标移动）;
            $ document.on（鼠标松开，鼠标松开）;
        }）;        .....
    };
}）;
 

解决方案

替换的jQuery

  $（$ attrs.resizerLeft）的.css（{
    宽度：X +'像素'
}）;
$（$ attrs.resizerRight）的.css（{
    左：（X + parseInt函数（$ attrs.resizerWidth））+'像素'
}）;
 

随着AngularJS相当于

  VAR rLeftElem = $文件[0] .getElementById（$ attrs.resizerLeft）;
VAR rRightElem = $文件[0] .getElementById（$ attrs.resizerRight）;angular.element（rLeftElem）的.css（{
    宽度：X +'像素'
}）;
angular.element（rRightElem）的.css（{
    左：（X + parseInt函数（$ attrs.resizerWidth））+'像素'
}）;
 

繁琐，但它可以做到的。

有关详细信息，请参见 AngularJS jqLit​​e参考。

I found one solution but it is used jQuery Reference.html and the directive code is like:

angular.module('mc.resizer', []).directive('resizer', function($document) {

    return function($scope, $element, $attrs) {

        $element.on('mousedown', function(event) {
            event.preventDefault();

            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
        });

        .....
    };
});

解决方案

Replace the jQuery

$($attrs.resizerLeft).css({
    width: x + 'px'
});
$($attrs.resizerRight).css({
    left: (x + parseInt($attrs.resizerWidth)) + 'px'
});

With the AngularJS equivalent

var rLeftElem = $document[0].getElementById($attrs.resizerLeft);
var rRightElem = $document[0].getElementById($attrs.resizerRight);

angular.element(rLeftElem).css({
    width: x + 'px'
});
angular.element(rRightElem).css({
    left: (x + parseInt($attrs.resizerWidth)) + 'px'
});

Tedious, but it can be done.

For more information see the AngularJS jqLite API Reference.

这篇关于如何调整2的div VerticalBar在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！