Μηνιαία Αρχεία: Φεβρουαρίου 2015

Αντιμετώπισης προβλημάτων Συμβουλή για γωνιακή οδηγιών (Ή, Μαθαίνοντας να αγάπη ενωτικά, πάνω από όλα και πάλι)

Έχω ένα ζευγάρι των apps που κάνουν $http.get() κλήσεις και θα ήθελα να είναι σε θέση να δείξει μια ωραία διαμορφωμένο λάθος μήνυμα με άσχημο λάθος λεπτομερειών, αλλά είναι προσιτή.  Βασικά, αυτό:

image

Και τότε αν ο χρήστης κάνει κλικ σχετικά με το σφάλμα, βλέπουν περισσότερες πληροφορίες:

image

Απλά πράγματα.  Δεδομένου ότι το ακριβές ίδιο δυναμικό σφάλμα μπορεί να εμφανιστεί σε διοικητικές οθόνη, καθώς και την οθόνη του τελικού χρήστη, σαφώς ζητούσε μια προσαρμοσμένη γωνιακή οδηγίας.  ΜΟΥ  βρήκα αυτό εξαιρετική σειρά των άρθρων (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 συνέβη να χρησιμοποιήσετε μόνο ονόματα, έτσι δεν είχα κάνει τη σύνδεση.

Ελπίδα αυτό βοηθά κάποιος.

</Τέλος>

undefinedΕγγραφείτε στο blog μου.

Συνέχεια μου για Twitter σε http://www.twitter.com/pagalvin

IE9 Πραγματικά δεν μου αρέσει όταν παίρνετε μια συντόμευση με σας <span> Ετικέτες

Έχω πέσει σε μια κακή συνήθεια να χρησιμοποιούν χρώμιο όλη την ώρα.  Είναι "κακό" επειδή τα πράγματα που έχω αναπτύξει πραγματικά χρειάζεται για να τρέξει σε πολλά άλλα προγράμματα περιήγησης στο web, συμπεριλαμβανομένων των, Δυστυχώς IE8.  Επαγγελματικό φορητό υπολογιστή μου έχει IE9 πρότυπο για οποιονδήποτε λόγο) και έκανα ένα γρήγορο έλεγχο για να δούμε τι πράγματα έμοιαζε σαν και αυτό δεν ήταν αρκετά.  Για παράδειγμα:

image

Έχει * υποτίθεται * να είναι κάπως έτσι:

image

 

Όχι μόνο ήταν κλειστό, αλλά τα γεγονότα κλικ μου δεν ήταν ψήσιμο.  (Οι περισσότεροι από αυτούς, ούτως ή άλλως).

Οπτικά, φαινόταν ότι τα πράγματα άρχισαν να πάει από τις ράγες κοντά στον σύνδεσμο "Για προχωρημένους".  Έχω έσκαψαν στο μέρος εκείνο του HTML και διαπίστωσε ότι είχα αυτή τη γραμμή:

<span class = "glyphicon glyphicon-νέα-παράθυρο" />

Αυτό φαίνεται σαν επιτρεπόμενη σύνταξη ("Chrome έκδοση 40.02214.94 m"είναι μια χαρά με αυτό). Πήγα και άλλαξε ούτως ή άλλως, όπως φαίνεται:

<span class = "glyphicon glyphicon-νέα-παράθυρο"></span>

Αυτός τον καθόρισε.

Ένα τέτοιο μικροσκοπικό μικρό πράγμα προκάλεσε ένα τέτοιο τεράστιο χάος μιας οθόνης.  Χρόνοι διασκέδασης.

Αυτό συνέβη να είναι μια γρήγορη λύση, αλλά είναι επίσης το είδος των πράγμα που παίρνει μόνο τη σπονδυλική στήλη σας έξω από την ευθυγράμμιση, όταν το βλέπετε.  Υπάρχουν πάνω από 500 γραμμές της HTML σε αυτή τη λειτουργία λίγο admin και σας απλά δεν θέλουν να βρείτε τον εαυτό σας σκάψιμο μεταξύ τα ζιζάνια, ποτέ Χαμόγελο.

</Τέλος>

undefinedΕγγραφείτε στο blog μου.

Συνέχεια μου για Twitter σε http://www.twitter.com/pagalvin