jQuery Resizable с Angular стиль нг не работает

0

Я не могу получить jquery resizable для работы с Angular и ng-style. Я понимаю, что я должен указывать высоту и ширину при создании изменяемого размера элемента, но, как вы можете видеть из приведенного ниже 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 стилем, он отлично работает (как показано ниже)

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

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

Любая идея, как я могу обойти это?

Теги:
jquery-ui-resizable

2 ответа

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(); }
            });
        }
    };
});

Причина. Когда переменная с изменяемой директивой компилируется, ширина и высота элемента равны нулю. Вы можете проверить это, вызвав elem.css('width') в директиве resizable.

Проверьте обновленную скрипку здесь

Поделиться
  • 0
    Это здорово, спасибо. Он отлично работает с ng-style = "{'width': '280px', 'height': '180px'}", но у меня возникают проблемы, если я делаю что-то вроде ng-style = "getLayerStyle (sceneLayer)"
  • 0
    Пока эта функция возвращает объект json, я не думаю, что у нас были какие-либо проблемы. Я попытался воссоздать проблему с функцией ngstyle, но у меня она работала нормально. Вот ссылка на jsfiddle
1

Обычно значением ng-стиля будет переменная scope $scope.myStyle = {'width':'400px', 'height':'200px'} и вы можете использовать переменную в ngStyle

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

Ссылка: ngStyle

Поделиться
  • 0
    Это была опечатка ... если вы проверите скрипту, вы увидите, что я использовал правильный синтаксис с кавычкой. В моем реальном коде я использую переменную области видимости, но для простоты я сделал это встроенным. Я не думаю, что это должно иметь значение. Есть идеи?
  • 0
    @ Flame1845 отредактировал мой ответ
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню