Question

我无法通过Angular和ng-style来调整jquery的大小。我知道在创建可调整大小的元素时必须指定高度和宽度，但正如您从下面的jsfiddle中看到的那样，任何ng样式似乎都会被忽略，并且没有应用高度或宽度。

<div ng-controller="myCtrl">
    <img resizable src="http://lorempixel.com/400/200/"
    ng-style="{'width':'400px', 'height':'200px'}"/>
</div>

http://jsfiddle.net/85my1qbc/3/

但是，如果我用样式替换ng-style，它可以正常工作（如下所示）

<div ng-controller="myCtrl">
    <img resizable src="http://lorempixel.com/400/200/"
    style="width:400px;height:200px"/>
</div>

http://jsfiddle.net/go1qak0w/1/

知道如何解决这个问题吗？

Answer 1

将ngStyle传递给您的指令，并在指令中设置css。

app.directive('resizable', function () {
    return {
        restrict: 'A',
        scope: {
            callback: '&onResize',
            ngStyle : '=ngStyle'
        },
        link: function postLink(scope, elem, attrs) {

            elem.css(scope.ngStyle);
            elem.resizable();
            elem.on('resizestop', function (evt, ui) {
                if (scope.callback) { scope.callback(); }
            });
        }
    };
});

原因：当指令resizable编译时，element的宽度和高度为零。您可以通过调用resizable指令中的elem.css（'width'）来检查这一点。

Check the updated fiddle here

Answer 2

通常ng-style值将是范围变量$scope.myStyle = {'width':'400px', 'height':'200px'}，您可以使用ngStyle中的变量

<div ng-controller="myCtrl">
    <img resizable src="http://lorempixel.com/400/200/" ng-style="myStyle"/>
</div>

参考：ngStyle

使用Angular ng-style的jQuery Resizable并不起作用

2 个答案: