AngularJS :regarder une expression composée de variable et de fonction

Question

tout le monde!Merci à l'avance!

J'ai le problème suivant:Je veux regarder un champ de saisie de l'attribut, qui est en même temps mon directive du nom, de se concentrer et de sélectionner la valeur lors de l' a) la zone du champ de saisie est dans a été activé ou lorsque b) et erreur de serveur s'est produite.

Voici le code de la zone de saisie:

<input type="email"
    data-focus-and-select="areas.contactInformationEditEmail || hasServerErrorsEmail()" />

Voici le code de la fonction de contrôleur:

$scope.hasServerErrorsEmail = function() {
    return !!($scope.notifications.errors.email.empty ||
            $scope.notifications.errors.email.invalid ||
            $scope.notifications.errors.email.illegal ||
            $scope.notifications.errors.email.blacklisted ||
            $scope.notifications.errors.email.conflict);
};

Si une erreur de serveur s'est produite, l'un de ces notification des erreurs est définie sur true.
Voici le code de la directive:

angular.module('myApp.directive').directive('focusAndSelect', function() {
    'use strict';
    return {
        scope: { focusAndSelect: '=' },
        link: function(scope, element) {
            scope.$watch('focusAndSelect', function(newValue) {
                if (newValue && !element.hasClass('ng-hide')) {
                    element[0].focus();
                    element[0].setSelectionRange(0, element[0].value.length);
                }
            });
        }
    };
});

Il y a trois scénarios possibles:

1) Le "focus et sélectionnez" fonctionne lorsque je change la forme modifiables mode, de sorte que areas.contactInformationEditEmail est définie sur true.2) Le "focus et sélectionnez" ne fonctionne pas quand j'ai un message d'erreur du serveur.Le champ de saisie n'est pas concentré et sélectionné.3), Mais lorsque je retire le areas.contactInformationEditEmail à partir de l'expression areas.contactInformationEditEmail || hasServerErrorsEmail(), le "focus et sélectionnez" travaille pour l'erreur de réception champ de saisie.

Je n'ai aucune idée.C'est peut-être un problème pour regarder et variable et et appel de fonction à la fois?

Merci pour votre aide.

Answer 1

lorsque vous utilisez '=' isolé dans le champ d'application de la directive, il se lie à une propriété dans la portée parent, il n'est pas possible de se lier à une expression évaluée.

essayez plutôt ceci:

<input type="email"
    data-focus-and-select="{{areas.contactInformationEditEmail || hasServerErrorsEmail()}}" />

et votre la directive:

angular.module('myApp.directive').directive('focusAndSelect', function() {
    'use strict';
    return {
        scope: { focusAndSelect: '=' },
        link: function(scope, element) {
            scope.$watch('focusAndSelect', function(newValue) {
                if (newValue && !element.hasClass('ng-hide') && scope.$eval(newValue)) {
                    element[0].focus();
                    element[0].setSelectionRange(0, element[0].value.length);
                }
            });
        }
    };
});

vous avez besoin de l' $eval parce que la valeur est une Chaîne et que vous voulez obtenir, c'est une valeur booléenne.

voici une procédure simplifiée jsfiddle pour le démontrer.