2016-08-04 4 views
0

So in einen Fehler ich habeHyphen in Objektschlüssel der ng-Klasse verursacht Syntaxfehler während der Kompilierung ... aber nichts brechen

lokal mit dem folgenden Code ausführen Entwicklung kommen
<div data-ng-if="statuses.notifications.length < 6" data-ng-bind="message" 
data-ng-class="{col-md-10:statuses.notifications.length == 1}" class="siteMessage"> 

Die problematische Bit von den Bindestrichen im Schlüssel in der Objektzuordnung für ng-Klasse.

Aber nichts bricht wirklich, hat jemand Erfahrung damit oder weiß mehr über diesen Fehler und warum nichts bricht?

Fehlerprotokoll:

angular.js:13642 Error: [$parse:syntax] http://errors.angularjs.org/1.5.6/$parse/syntax?p0=-&p1=is%20unexpected%2C%…%20%3D%3D%201%7D&p4=-md-10%3Astatuses.notifications.length%20%3D%3D%201%7D 
at Error (native) 
at http://127.0.0.1:8000/bower_components/angular/angular.min.js:6:412 
at Object.throwError (http://127.0.0.1:8000/bower_components/angular/angular.min.js:228:143) 
at Object.consume (http://127.0.0.1:8000/bower_components/angular/angular.min.js:228:318) 
at Object.object (http://127.0.0.1:8000/bower_components/angular/angular.min.js:228:53) 
at Object.primary (http://127.0.0.1:8000/bower_components/angular/angular.min.js:224:68) 
at Object.unary (http://127.0.0.1:8000/bower_components/angular/angular.min.js:223:411) 
at Object.multiplicative (http://127.0.0.1:8000/bower_components/angular/angular.min.js:223:157) 
at Object.additive (http://127.0.0.1:8000/bower_components/angular/angular.min.js:222:493) 
at Object.relational (http://127.0.0.1:8000/bower_components/angular/angular.min.js:222:328) <div data-ng-if="statuses.notifications.length < 6" data-ng-bind="message" data-ng-class="{col-md-10:statuses.notifications.length == 1}" class="siteMessage ng-binding ng-scope"> 

Der Fehler Link (https://docs.angularjs.org/error/ $ Parse/Syntax p0 = - & p1 = ist% 20unexpected,% 20expecting% 20% 5B% 7D% 5D & p2 = 5 & p3? =% 7Bcol-md-10: status.notifications.length% 20% 3D% 3D% 201% 7D & p4 = -md-10: status.notifications.length% 20% 3D% 3D% 201% 7D) sagt mir das Es ist ein Syntaxfehler während der Kompilierung, aber es sagt nichts wie ... es ist cool, aber nichts wird brechen, wir loggen es nur zum Spaß haha.

Antwort

2

Wenn ich mich recht erinnere, sollten Sie den Teil mit col-md-10 zitieren und ein Leerzeichen nach dem Doppelpunkt hinzufügen wie folgt: data-ng-class="{'col-md-10': statuses.notifications.length == 1}"

suggestiv Herausgegeben von @ Andrew-clavin (nicht finden konnte, wie den Vorschlag zu akzeptieren, Ich hoffe, Textgutschrift ist in Ordnung :))

+0

die Zitate scheinen es zu brechen, ich dachte über die Einrichtung eines Objekts, das identisch im Umfang sah und wickelte es in der {{}}, aber ich war neugierig auf etwas in Bezug auf, warum der Kompilierfehler kommt, aber nichts auf der Seite bricht –

+1

Ich folge normalerweise dem Beispiel von diesem: https://scotch.io/tutorials/the-many-ways-to-use-ngclass#ngclass-usin g bewertet Ausdruck Edit: gedrückt eingeben zu schnell: p Sie könnten versuchen: Daten-ng-class = "{ 'col-md-10': (statuses.notifications.length == 1)}" oder noch besser, vermeiden Sie den Zwang in der gleichen gehen: Daten-ng-Klasse = "{'Col-md-10': (statuss.notifications.length === 1)}" Eine andere Option wäre zu versuchen, das "Daten -" - Präfix des Attributs zu entfernen, obwohl ich sehr bezweifle, dass das einen Unterschied machen wird, verwende ich es einfach nicht, also ist es einen Versuch wert, wenn alles andere fehlschlägt –

+0

Das Datenpräfix soll es koscher machen HTML-Markup, nicht, dass der Browser es ohne es ablehnen würde, aber so folgt es der Spezifikation. Guter Fang beim Zwang. Es stellt sich heraus, dass die "einfachen Anführungszeichen" das Problem behoben haben, sobald ich den Raum nach dem Doppelpunkt eingefügt habe (oops). Danke @rohde! Immer noch neugierig auf den Kompilierfehler, der nichts kaputt macht und alles funktioniert immer noch, du denkst das ist ziemlich normal für eckig? Ich kann mich nicht daran erinnern, jemals hineingerannt zu sein. –

Verwandte Themen