Comment puis-je ajouter une classe à une entrée si celle-ci est modifiée avec AngularJS?

Prendre un coup d'oeil à ce jsfiddle: http://jsfiddle.net/hNrEV/2/

L'idée principale est d'utiliser $scope.$watch pour surveiller les modifications apportées à la boîte de saisie. J'ai donné un id de rowTitle, et utilisé une directive appelée watchRowTitle que des montres pour les changements de $scope.row.title, et ajoute une classe "rouge" qui colore le texte en rouge à chaque fois que le texte dans la zone d'entrée est égal à "faux titre".

C'est probablement une bonne pratique de manipulation du DOM dans les directives. Ici, le watchRowTitle directive renvoie un objet avec 4 touches:

• modèle - le html qui remplace le watch-row-title tag. nous n'avons pas besoin de cela ici
• portée - Ici, nous avons recours à un isolé portée. Fondamentalement, le '=' établit à 2 voies de la liaison de données entre scope.title à l'intérieur de la watch-row-title la directive et le $scope.row.title valeur à l'intérieur de la MyCtrl contrôleur.
• restreindre - Nous lui donner une valeur de E, qui représente l'élément. Donc cela limite l'utilisation de l' watch-row-title directive dans les balises html, en d'autres termes: <watch-row-title></watch-row-title>
• lien - ceci est le lien fonctionne, où les choses intéressantes qui se passe. Ici, nous utilisons scope.$watch sur title. Nous devons fournir une fonction de 2 paramètres newValue et oldValue (vous pouvez donner un nom à quelque chose, mais le fait de les nommer de cette façon est plus significatif), qui détient les nouvelles et les anciennes valeurs de la variable qui est regardé. Chaque fois que le scope.title variable devient la chaîne "faux titre", il ajoute la classe CSS "rouge" à la zone de saisie de l'id rowTitle (notez la façon dont le texte dans la zone d'entrée s'allume en rouge). Sinon, il supprime que la classe CSS. Cette partie se fait à l'aide de JQuery.

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
    <input id="rowTitle" type="text" ng-model="row.title" class="ng-pristine ng-valid" />
    <watch-row-title title="row.title"></watch-row-title>
</div>

CSS:

.red {
    color: red;
}

JavaScript:

angular.module('myApp', [])
    .controller('MyCtrl', [
        '$scope',
        function ($scope) {
            $scope.row = {};
        }
    ])
    .directive('watchRowTitle', [
        function () {
            return {
                template: '',
                scope: {
                    title: '='
                },
                restrict: 'E',
                link: function(scope, element, attr) {
                    scope.$watch('title', function(newValue, oldValue) {
                        if (newValue === 'wrong title') {
                            $('#rowTitle').addClass('red');
                        } else {
                            $('#rowTitle').removeClass('red');
                        }
                    });
                }
            };
    }
]);

OriginalL'auteur yanhan