jQuery 使用 Angular 调整大小 ng 样式不起作用

Question

我无法调整 jquery 大小以使用 Angular 和 ng 样式。我知道在创建可调整大小的元素时必须指定高度和宽度，但是正如您从下面的 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 替换为 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 指令编译时，元素的宽度和高度为零。您可以通过在可调整大小指令中调用 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

jQuery 使用 Angular 调整大小 ng 样式不起作用

jQuery Resizable with Angular ng-style doesn't work

jquery

angularjs

jquery-ui

jquery-ui-resizable