Transformer dynamiquement en css à l'aide ng-style

Je ne pouvais pas obtenir transform au travail, lorsqu'il est à l'intérieur de ng-style.

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div style="transform: rotate(3deg);-webkit-transform: rotate(3deg);-ms-transform: rotate(3deg)">Test</div>
    <div ng-style="{"transform": "rotate({{number}}deg)", "-webkit-transform": "rotate({{number}}deg)", "-ms-transform": "rotate({{number}}deg)"}">{{number}}</div>
    <input type="number" ng-model="number" value=1>
  </body>

</html>

Lien: http://plnkr.co/edit/txSzAKxLDq48LVitntro?p=preview

Si je change le input nombre le haut de la div qui devrait changer, et spin en même temps. Il devrait ressembler à la parole Test au-dessus de lui quand il a une valeur de 3.

Alors, comment obtenir transform de travail dans ce cas?

Grâce.

Vous avez besoin d'échapper à ces citations à l'intérieur de l'attribut HTML
Est-ce ok: plnkr.co/modifier/93zsv34W8ccrL0cArUXl?p=preview ?

OriginalL'auteur HP. | 2014-02-28

  1. 36

    Vous ne pouvez pas utiliser l'accolade de liaison à l'intérieur d'un JS chaîne à l'intérieur d'un attribut. Vous pouvez ajouter la variable sur la chaîne à la place:

    <div ng-style="{'transform': 'rotate('+number+'deg)', '-webkit-transform': 'rotate('+number+'deg)', '-ms-transform': 'rotate('+number+'deg)'}">{{number}}</div>

    Aussi, j'ai remplacé votre guillemets avec des célibataires.

    Cependant, vous pourriez envisager d'ajouter une fonction à votre contrôleur pour revenir le style approprié:

    Contrôleur:

    //Create a variable to store the transform value
$scope.transform = "rotate(0deg)";
//When the number changes, update the transform string
$scope.$watch("number", function(val) {
    $scope.transform = "rotate("+val+"deg)";
});

    HTML:

    <!-- We can now use the same value for all vendor prefixes -->
<div ng-style="{'transform': transform, '-webkit-transform': transform, '-ms-transform': transform }">{{number}}</div>

    Mise À Jour Plunker

    Cool , utile syntaxe..
    Géniale! Merci. C'était juste la chose que je cherchais 🙂
    Vous pouvez ajouter toutes vos règles css à l'intérieur d'un objet json sur votre scope, ça sera plus lisible. Voir ce plunker de la doc: plnkr.co/modifier/y8CeZq?p=preview
    Vous ne pouvez pas le faire avec du CSS fournisseur de préfixes dans Angulaire. Ils obtiennent normalisé pour déposer la -webkit- et -ms- préfixes. par exemple
    Je voudrais faire une fonction retournant un objet avec les règles de style, de garder le html plus propre.

    OriginalL'auteur CodingIntrigue