2014-01-15 5 views
12

ich diesen Code habe, und ich kann nicht sehen, wo die Quelle des Problems ist, bekomme ich keine Fehler in der Chromkonsole meinen Controller:Winkelsteuerungsbereich nicht nach jQuery Ajax-Aufruf zu aktualisieren

function notifController($scope) { 
    $scope.refreshMsgs = function() { 
    $.post("notification-center-trait.aspx") 
     .success(function (data) { 
     $("#loadedthings").html(data); 
     newMsgs = JSON.parse($("#label1").html()); 
     $scope.msgs = newMsgs; 
     }); 
    } 
    $scope.refreshMsgs(); 
} 

label1 und label2 werden in einem div loadedthings korrekt geladen;

newMsgs in der Konsole wird genau so analysiert, wie es sollte;

hatte ich es für andere Seiten arbeiten, aber es scheint, dass ich etwas auf dieser one.I <html ng-app> Tag verpasst haben:

<div ng-controller="notifController"> 
    <div class="row"> 
    {{msgs.length}} new msgs : 
       <table class="table"> 
        <tbody > 
         <tr ng-repeat="msg in msgs"> 
         <td> 
          {{msg.sender}} 
         </td> 
         <td> 
          {{msg.message}} 
         </td> 
         <td> 
          {{msg.date}} 
         </td> 
         </tr> 
        </tbody> 
       </table> 
</div> 
</div> 

i in der Konsole 'undefined', wenn ich ausführen dieses: angular.element($0).scope()

+0

Sind Sie sicher, dass "$ 0" funktioniert ?. Ich weiß nicht, was du damit machst ... – m59

+0

Ich habe deinen Code getestet und alles funktioniert einwandfrei. Ich vermute, dass Sie sich unangemessen mit dem DOM anlegen und einen Fehler gemacht haben. Alles wie 'eckle.element' gehört in eine Direktive. Angular stellt die Scope-Eigenschaft unabhängig von * vielleicht * seltenen Ausnahmen überall dort zur Verfügung, wo Sie sie benötigen. Daher sollten Sie auf diese Weise nicht auf ein Element oder einen Bereich zugreifen müssen. – m59

+0

@ m59 Ich habe 'angle.element ($ 0) .scope()' gerade in der Chrom-Konsole ausgeführt, nur um zu sehen, was in meinem Bereich passiert [link] (http://stackoverflow.com/questions/13743058/how-to -access-the-angle-scope-Variable-in-Browser-Konsole) aber ich bekomme 'undefiniert' – zerzer

Antwort

25

Abgesehen von anderen architektonischen Fragen habe ich in den Kommentaren darauf hingewiesen, das eigentliche Problem ist, dass Sie jQueryajax anstelle von Angulars $http verwenden. Wenn du solche Dinge nicht über Angular machst, arbeitest du außerhalb von Angulars Reichweite und weiß nichts über Veränderungen. Obwohl nicht ideal, können Sie $scope.$apply verwenden, um eckig wissen zu lassen, dass etwas außerhalb seines Wissens aktualisiert wurde. Das würde wie folgt aussehen:

$scope.$apply(function() { 
    $scope.msgs = newMsgs; 
}); 

Das Eckige ist zu sagen, dass Sie etwas geändert habe es etwa von einem Zusammenhang wissen muss, dass es sich nicht um (in diesem Fall die jQuery-Ajax-Aufruf) nicht kennt.

Es gibt einige gültige Verwendungen von $scope.$apply(), wie in Ereignishandlern, aber die meisten anderen Male ist es ein Zeichen für schlechte Praktiken. Sie sollten auf jeden Fall Angulars $http für Ajax Anrufe verwenden.

+1

Als Addendum kann $ scope. $ Apply Fehler ausgeben, wenn Sie es zur falschen Zeit verwenden (Sie können es nicht überall hin setzen, wo Sie sich schlecht benehmen, als Lösung für alle), jedoch $ timeout (ein Angular Wrapper für setTimeout) verhält sich die ganze Zeit und stellt sicher, dass Ihre Änderungen im * next * $ apply pass enden (wo sie sowieso gelandet wären). Es sollte nicht missbraucht werden, aber es ist sicherer als $ anzuwenden, ohne schmutzige Hacks in Richtlinien, um zu überprüfen, ob es sicher ist oder gebraucht wird oder nicht. – Norguard

+0

@Norguard Wahr ... aber wenn Sie jemals '$ apply' an einer Stelle verwenden, an der es einen Fehler gibt, sollte es überhaupt nicht verwendet werden. Das ist ein riesiger Code-Geruch. Wie gesagt, "$ apply" wird normalerweise nicht benötigt, es sei denn, Sie verwenden Ereignisse oder Bibliotheken von Drittanbietern. – m59

+1

absolut. Aber einige dieser Bibliotheken von Drittanbietern sind halb synchron, halb asynchron und andere gehen ihre eigenen Hasenlöcher von Pub/Sub oder SetTimeout hinunter, oder Sie müssen nur in diesen Kreisen um sie herum tanzen. Ich weiß aus erster Hand, dass sowohl MaonryJS (für Pinterest-/Unendlich-Tumble-Layouts) als auch D3JS (zum Erstellen von Tween-fähigen SVG-Graphen) ihren Anteil an Elend mit 'if (! $ Scope. $ RootScope . $$ Phase) 'Unsinn, wenn Angular nur teilweise in den Prozess eingebunden ist (wie Msnry.stamp + Msnry.layout bei einer ng-Wiederholung aufrufen ...). '$ timeout' ist dann sehr elegant. – Norguard