Changer la couleur du texte dynamiquement AngularJS

J'ai du mal à penser "L'angle de Façon" ainsi, c'est sans doute un problème simple, mais je vais essayer de l'avoir, donc quand je clique sur un bouton (qui finira par être de couleur) les modifications du texte à la couleur. Ici, c'est essentiellement le code:

JS

var myApp = angular.module('myApp', []);

myApp.controller('ColorCtrl', ['$scope', function($scope){

    $scope.changeColor = function(value){
        return {"color:" value };
    }

    $scope.turnGreen = function (){
        //what to do here?
    }

    $scope.turnBlue = function() {
        //and here?
    }
}]);

HTML

<div ng-app="myApp" ng-controller="ColorCtrl">

    <button ng-click="turnBlue()">Make text blue</button>
    <button ng-click="turnGreen()">Make text green</button>

    <p ng-style="changeColor(value)">I should be either green or blue!</p>

</div>

Je sais que je pourrais facilement utiliser jQuery pour sélectionner le texte que je veux travailler avec, mais je ne veux pas le faire. Dois-je donner mon point d'un modèle? Tout pousser dans la bonne direction est grandement apprécié, merci.

Avez-vous vu l'exemple ici: docs.angularjs.org/api/ng.directive:ngStyle Il le fait sans contrôleur.
Je devrais être honteux de poser une question sans en cochant la case correspondante doc. Remercie de votre aide bien, exactement ce que je cherchais.
Comme je l'ai mentionné ci-dessous, j'ai créé un jsbin: jsbin.com/eLOvocu/1

OriginalL'auteur Chris | 2014-01-02

  1. 19

    Vous pourriez le faire de cette façon:

    Définir ng-directive de classe et de la valeur que colorClass qui sera défini dans la portée.

    <p ng-class="customStyle.colorClass">I should be either green or blue!</p>

    et à faire:

     $scope.customStyle = {};
 $scope.turnGreen = function (){
    $scope.customStyle.colorClass = "green";
}

$scope.turnBlue = function() {
    $scope.customStyle.colorClass = "blue";
}

    et certaines règles:

    .green{
  color:green;
}
.blue{
  color:blue;
}

    ou avec style en ligne 

     <p ng-style="customStyle.style">I should be either green or blue!</p>

    et

    $scope.customStyle = {};
$scope.turnGreen = function (){
    //what to do here?
    $scope.customStyle.style = {"color":"green"};
}

$scope.turnBlue = function() {
    $scope.customStyle.style = {"color":"blue"};
}
    Je vais vous recommandons de changer le $scope.colorClass être de portée.les données.colorClass pour éviter le prototype en question dans des scénarios plus complexes. Mon exemple est similaire à la vôtre: jsbin.com/eLOvocu/1
    Je voudrais essayer d'expliquer ce que je veux dire, mais il n'y a pas assez de place ici pour l'expliquer. Pour mieux comprendre, veuillez consulter ces deux liens: github.com/angular/angular.js/wiki/Understanding-Scopes et les trois prochaines minutes de ceci: youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.être&t=30m
    Alors la, pour résumer le prototype de la chaîne n'est pas consulté lors de la résolution des primitives propriétés, et donc vous devriez utiliser un objet comme la propriété au lieu de sorte que les propriétés ne pas obtenir de l'ombre.
    merci pour le jsbin, et a aidé à ce que je suis en train de faire.

    OriginalL'auteur PSL