AngularJS: Guardare un'espressione composta da variabile e funzione

Question

Tutti! Grazie in anticipo!

Ho il problema seguente: Voglio guardare l'attributo di un campo di input, che allo stesso tempo è il nome della mia direttiva, concentrarmi e selezionare il valore quando a) L'area Il campo di input è stato attivato o quando b) e errore dal server si è verificato.

Qui il codice del campo di input:

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

.

Qui il codice della funzione Controller:

$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 è verificato un errore del server, uno di questi errori di notifica è impostato su true.
Ecco il codice della direttiva:

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);
                }
            });
        }
    };
});

.

Ci sono tre scenari:

1) La "messa a fuoco e selezionare" funziona quando modifico il modulo in modalità modificabile, in modo che areas.contactInformationEditEmail sia impostato su TRUE. 2) La "messa a fuoco e seleziona" non funzionerà quando ricevo un errore del server. Il campo di input non è focalizzato e selezionato. 3) Ma quando rimuovo il areas.contactInformationEditEmail dall'espressione areas.contactInformationEditEmail || hasServerErrorsEmail(), "Focus and Select" funziona per l'errore di ricezione del campo di immissione.

Non ne ho idea. È forse un problema da guardare e variabile e la funzione chiama una volta?

Grazie per il tuo aiuto.

Answer 1

Quando si utilizza '=' nella portata isolata della direttiva che si lega a una proprietà nella portata principale, non è possibile legarsi a un'espressione valutata.

prova questo invece:

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

.

E la tua direttiva:

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);
                }
            });
        }
    };
});

.

Hai bisogno del $ EVAL perché il valore sarà una stringa e si desidera ottenere il suo valore booleano.

Ecco un SEMPLIFICATO jsfiddle per dimostrarlo.