Angular ngStyle Variable Style

Я пытаюсь дать мой динамический стиль div - я хочу, чтобы css пришел с контроллера, где объект css, который возвращает контроллер, не жестко закодирован, а динамически изменяется (мне нужен «верхний», поле, которое является переменной). Я использую нг стиль, чтобы попытаться достичь этого:Angular ngStyle Variable Style

-html- 
<div id="preview" ng-style="setTopPosition()"> 

-controller- 
    $scope.setTopPosition = function() { 
    console.log("top position: " + $scope.topPosition); 
    var retObj = { top : $scope.topPosition , background: "green" }; 
    console.log(retObj); 
    return retObj 
};

Теперь я знаю, что значения я ожидал ($ scope.topPosition и т.д.) есть (они показывают в журнале консоли), и я знаю, контроллер запускает его код, так как фон div становится зеленым. Однако верхняя позиция не работает. Не можете ли ng-стиль использовать объекты с переменными полями? Кроме того, нужно ли это настраивать вместо этого?

источник

2013-09-12 Joel_Blum

Как все говорили, что вам нужно, чтобы убедиться, что у вас есть " px 'добавлено к значению, однако моя проблема на самом деле заключалась в том, что $ scope.topPosition вычислялось как несинхронно. В таком случае вам нужно добавить $ scope. $ Apply –

Ну, вам нужно иметь 'px', если вы не используете jQuery .... – iConnor

Удалить фигурные скобки от ng-style="setTopPosition(), если вы хотите использовать его как переменную.

Это должно быть ng-style="setTopPosition

в контроллере, как пример:

$scope.setTopPosition= { 
      top : $scope.topPosition+'px', 
      background : "green", 
      "width": 0 + '%', 
      "height": 5 + 'px' 
     };

на любое изменение вы только что установили новые значения $scope.setTopPosition= {/* ... */}

источник

2013-09-12 11:29:24

Кстати есть привязка между представлением и $ scope.topPosition? Он определяется асинхронно в моем контроллере, может быть, проблема там ... –

независимо от того, где вы добавляете новые значения в '$ scope.setTopPosition'. Даже в асинхронных задачах. Он должен работать –

@MaximShoustin, если это асинхронно, вам нужно будет использовать '$ scope. $ Apply();' – iConnor

Если вы не используете JQuery с угловой вы должны предоставить px часть значения. jQlite не поддерживает расширенный CSS-материал, такой как jQuery, поэтому вы должны это сделать.

top : $scope.topPosition + 'px'

Примечание: Причина, почему я говорю, что это потому, что стили применяются обычно в ng-style директивы, как это: element.css(styles);

источник

2013-09-12 11:31:59 iConnor

В случае, если кто-то приходит через этот вопрос, как я сделал, проблема для меня пришло после обновления от Angular 1.2.x до Angular 1.3.x.

После обновления, он на самом деле не удалось, когда я вручную добавил 'px':

<span ng-style="{top: spanTop + 'px'}">I (don't) have top!</span>

и он начал работать, когда я удалил 'px':

<span ng-style="{top: spanTop}">I have top!</span>

источник

2015-01-03 22:47:56 colllin

Angular ngStyle Variable Style

ответ

Смежные вопросы