Έχω ένα ζευγάρι των apps που κάνουν $http.get() κλήσεις και θα ήθελα να είναι σε θέση να δείξει μια ωραία διαμορφωμένο λάθος μήνυμα με άσχημο λάθος λεπτομερειών, αλλά είναι προσιτή. Βασικά, αυτό:
Και τότε αν ο χρήστης κάνει κλικ σχετικά με το σφάλμα, βλέπουν περισσότερες πληροφορίες:
Απλά πράγματα. Δεδομένου ότι το ακριβές ίδιο δυναμικό σφάλμα μπορεί να εμφανιστεί σε διοικητικές οθόνη, καθώς και την οθόνη του τελικού χρήστη, σαφώς ζητούσε μια προσαρμοσμένη γωνιακή οδηγίας. ΜΟΥ βρήκα αυτό εξαιρετική σειρά των άρθρων (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) από το μεγάλο Dan Wahlin. Ακολουθία των συμβουλών, Πολύ γρήγορα δημιούργησα ένα <γειά σου-κόσμος> οδηγία και κινημένος προς το μου πιο περίπλοκη ελαστικό μάκτρο οθόνη σφάλματος. Έτρεξα σε ένα κομμάτι του προβλήματος με την παρούσα πιο περίπλοκη οδηγία. Ευτυχώς, είδος κατά τύχη, Είχα πει WebStorm (ο επεξεργαστής χρησιμοποιώ αυτές τις μέρες) ότι το JS αρχείο ήταν μια γωνιακή αρχείο και αυτό με βοήθησε να καταλάβω το θέμα. Αυτός είναι ο κώδικας για την ίδια την οδηγία:
angular.Module("CDLApp").οδηγίας("generalCdlErrorHandler", συνάρτηση() {
επιστροφή {
περιορίζουν: "E",
αντικατάσταση: TRUE,
πεδίο εφαρμογής: {
retrieveLastConfigurationError: "&"
},
πρότυπο:
'<div class = "συναγερμού προειδοποίηση κινδύνου" ρόλο = "συναγερμού" ng-init = "doShowExpandedErrorDetails = true" ng-εμφάνιση = "retrieveLastConfigurationError()">' +
«Υπήρξε ένα σφάλμα εισόδου/εξόδου ή άλλα σφάλμα. Αυτό συμβαίνει συνήθως επειδή το αρχείο δεδομένων ρύθμισης παραμέτρων δεν θα μπορούσε να είναι» +
«βρέθηκαν ή το αρχείο ρυθμίσεων περιέχει ανακριβείς πληροφορίες (όπως η αναφορά σε μια βιβλιοθήκη εγγράφων» +
«που δεν υπάρχει).' +
' <br />' +
' <div ng-εμφάνιση = "doShowExpandedErrorDetails">' +
' <ένα href = "#" ng κλικ = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
«Κάντε κλικ εδώ για να αποκρύψετε λεπτομέρειες.» +
' </ένα>: ' +
' <br />' +
' <προ>{{retrieveLastConfigurationError() | JSON}}</προ>' +
' <br />' +
' </div>' +
' <div ng-εμφάνιση = "!doShowExpandedErrorDetails">' +
' <ένα href = "#" ng κλικ = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
«Κάντε κλικ εδώ για να επεκτείνει τις λεπτομέρειες σφάλματος.» +
' </ένα>' +
' </div>' +
'</div>'
};
});
Βασικά, Είμαι δημιουργώντας ένα νέο στοιχείο που ονομάζεται ένα "generalCdlErrorHandler". Χρειάζεται πρόσβαση σε μια λειτουργία που ονομάζεται retrieveLastConfigurationError και που αντιμετωπίζεται στο αντικείμενο εφαρμογής. Εγώ πιθανώς θα μπορούσε να χρησιμοποιήσει μόνο πεδίο εφαρμογής του γονέα, αλλά που αισθάνεται τεμπέλης. Αν κάποιος νομίζει ότι θα έπρεπε να έχουν κάνει που, Θα ήθελα πολύ να ακούσω για αυτό στα σχόλια.
Αυτό was όλος εξαιρετικός, αλλά δεν ήταν να πάρει τίποτα. Δεν λάθη που έσκασε επάνω στην κονσόλα (τουλάχιστον μια φορά έχω σταθερό όλα τα σφάλματα sx δημιούργησα κατά μήκος του τρόπου). Απλά δεν είχα πάρει κάποια έξοδο από την οδηγία. Πήγα και πρόσθεσε μερικά στατικό κείμενο πριν από την οδηγία ng-εμφάνιση και * έκανε * πάρει που. Αυτό με έκανε να σκεφτώ ότι ίσως η οδηγία δεν είχε το δικαίωμα να δημιουργήσετε νέα vars, όπως "doShowExpandedErrorDetails" σιωπηρά ή να έχουν μια "init-ng" εκεί.
Πήγα πίσω στο HTML για να δείτε αν είχα έναν τύπο και αυτή τη φορά WebStorm με βοήθησε. Είχε περάσει στη συνάρτηση retrieveLastConfigurationError όπως αυτό:
<retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError γενικός-cdl-σφάλμα-χειριστή()">
</γενικό-cdl-σφάλμα-χειριστή>
Αλλά πραγματικά έπρεπε να είναι αυτό:
<γενικό-cdl-σφάλμα-χειριστή ανάκτηση-τελευταίο-διαμόρφωση-σφάλμα = "CDLController.retrieveLastConfigurationError()">
</γενικό-cdl-σφάλμα-χειριστή>
WebStorm ήταν αρκετά έξυπνος για να ξέρω ότι θα έπρεπε να χωριστεί. Εάν δεν είχε παρασχεθεί η υπόδειξη, Εγώ θα πιθανώς ακόμα αντιμετώπιση προβλημάτων αυτό 
. Χρόνοι διασκέδασης!
Το τέχνασμα είναι αυτό: όχι μόνο είναι το όνομα στοιχείου οδηγίας ενωτικό, έτσι είναι οποιαδήποτε χαρακτηριστικά που προσθέτετε σε αυτό. Μόλις προστεθεί οι παύλες, όλα έλυσα σπουδαίος. Το σεμινάριο του Dan συνέβη να χρησιμοποιήσετε μόνο ονόματα, έτσι δεν είχα κάνει τη σύνδεση.
Ελπίδα αυτό βοηθά κάποιος.
</Τέλος>
Συνέχεια μου για Twitter σε http://www.twitter.com/pagalvin