Angularjs Controller bricht meine Ausdrücke

Ich habe gerade den CodeSchool-Kurs auf Angularjs abgeschlossen und habe mit der Aktualisierung einer aktuellen Website von mir versaut. Lustigerweise, wenn ich Controller oder Direktivencode schreibe, funktioniert es nicht. Aber es scheint gut zu funktionieren mit jemand anderen Code. Daher vermute ich stark, dass etwas mit meinem App-Code nicht stimmt, aber ich kann es einfach nicht für mein Leben finden.Angularjs Controller bricht meine Ausdrücke

Der eingegebene Code wird durch ...omit dargestellt und ist verfügbar, wenn es tatsächlich relevant ist und ich falsch liege.

Hier ist der relevante html:

<!DOCTYPE html> 
<html ng-app="main" lang="en"> 
<head> 
    ...omit 
    <!--Script Includes--> 
    <script src="/script/jquery.min.js"></script> 
    <script src="/script/bootstrap.min.js"></script> 
    <script src="/script/angular.min.js"></script> 
    <script src="/script/main.js"></script> 
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
    ...omit 
    <div class="container content"> 
     ...omit 
     <div id="schedule"> 
      <h1>See us in Concert</h1> 
      <ul class="list-group" ng-controller="ScheduleController as schedCtrl"> 
       <li class="list-group-item">{{ 5 + 5 }}</li> 
       <li class="list-group-item">Highlights <span class="badge">{{schedCtrl.highlight.count}}</span></li> 
       <li class="list-group-item">Upcoming <span class="badge">{{schedCtrl.now.count}}</span></li> 
       <li class="list-group-item" ng-repeat="next in schedCtrl.future">{{next.month}} <span class="badge">{{next.count}}</span></li> 
      </ul> 
     </div> 
     ...omit 
    </div> 
</body> 
</html>

Und 'main.js':

(function() { 
    'use strict'; 
    var app = angular.module('main', [ ]); 

    app.controller('ScheduleController', [$http, function ($http) { 
     // Some test data 
     this.highlight.count = 2; 
     this.now.count = 5; 
     this.future = [{month: "June", count: 7}, {month: "July", count: 4}]; 
    }]); 
})();

ich mehrmals über sie gelesen haben und unzählige Seiten nach einer Lösung gesucht, aber Ich kann es einfach nicht zur Arbeit bringen. Anstatt die Ausdrücke als Ausdrücke zu behandeln, behandelt sie sie einfach als Text und druckt den Ausdruck selbst aus.

Quelle

2016-05-24 Luke Samuel

Es gibt mehrere Fehler in Ihrem Code. Going durch einfachere Möglichkeit Gebrauch das folgende Beispiel der Codierung:

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <div class="container content"> 
     <div id="schedule"> 
      <h1>See us in Concert</h1> 
      <ul class="list-group"> 
       <li class="list-group-item">{{ 5 + 5 }}</li> 
       <li class="list-group-item">Highlights <span class="badge">{{highlight.count}}</span></li> 
       <li class="list-group-item">Upcoming <span class="badge">{{now.count}}</span></li> 
       <li class="list-group-item" ng-repeat="x in future">{{x.month}} <span class="badge">{{x.count}}</span></li> 
      </ul> 
     </div> 
<script> 
//module declaration 
var app = angular.module("myApp",[]); 
//controller declaration 
app.controller('myCtrl',function($scope){ 
    // Some test data 
    $scope.highlight = {count:2}; 
    $scope.now = {count : 5}; 
    $scope.future = [{month: "June", count: 7}, {month: "July", count: 4}]; 
}); 
</script> 
</body> 
</html>

Quelle

2016-05-24 06:22:40 Deadpool

Das ist großartig, aber ich würde gerne wissen, was diese Fehler sind. Ich verstehe, dass du es einfach machen willst; Mein Fokus liegt jedoch auf Erweiterbarkeit. –

Sie müssen $ scope im Controller anstelle von $ http definieren. Sie können eine Eigenschaft eines Objekts nicht direkt definieren, ohne das Objekt selbst zu definieren. Außerdem ... versuche Lynda, es hat bessere Tutorials bekommen. – Deadpool

Ich wollte $ http später zum Laden von Json verwenden, aber danke. Ich werde das überprüfen, weil der CodeSchool-Kurs dies gelehrt hat. anstelle von $ scope. Es ergab für mich keinen Sinn, da ich an native oop wie Java oder C++ gewöhnt bin, aber ich habe keine Erfahrung mit JS, wie Sie sehen können. –

Wenn Sie

(function() { })();

Winkel tun ist, mehr nach innen nicht definiert.

(Zur Info: Die oben ist ein self-executing anonyme Funktion http://markdalgleish.com/2011/03/self-executing-anonymous-functions/.)

So müssen Sie es

(function (angular) {})(angular);

ändern auch in Ihrem Controller hinzufügen, um dieses

var self = this; 
self.highlight.count =2;

Es ist eine gute Übung, 'this' nicht zu verwenden, sondern sie einer Variablen so zuzuteilen, dass sie den Geltungsbereich abdeckt s werden nicht durcheinander gebracht. Auf diese Weise gibt es keine Notwendigkeit, $ scope (die in späteren Versionen fallen gelassen wird)

Auch diese Fehler herauszufinden, schauen Sie in Ihren Entwicklertools in Chrome oder IE, welche Javascript-Fehler Sie erhalten. Alle Winkelfehler haben Links zu relevanten Seiten. Obwohl Ihr Fehler "eckig" sein wird, ist undefiniert.

Quelle

2016-05-24 08:59:05 woutervs

Angularjs Controller bricht meine Ausdrücke

Antwort

Verwandte Themen