$ Scope Variable ständig ändern

Question

Ich habe das Problem, dass meine Variable $scope.test ändert sich ständig.

Zuerst habe ich eine Funktion auf meinem node.js-Server, der eine json Objekt wie das unten zurückgibt:

{ 
    objectOne: "some text", 
    objectTwo: "more text", 
    objectThree: { 
     text: "important text", 
     inf: "some info" 
    }, 
    objectFour: "even more text" 
} 

dann in Winkel i einen Controller. (Dieser Controller wird für 2 HTML-Vorlagen verwendet. nicht sicher, ob wichtig). So an die Funktion in der Steuerung:

$scope.start = function() { 
    $location.path('/start'); 
    SomeService.start({}, someVar, function (success, msg, t) { 
     if (!success) { 
      console.error(msg); 
     } 

     $scope.test = t; 
     console.log($scope.test); //this prints out the json object above 
    }); 
}; 

Und dann habe ich eine Vorlagendatei test.html:

<div> 
    <md-card> 
     <md-card-title> 
      <md-card-title-text> 
       <span class="md-headline">{{test.objectThree.text}}</span> 
      </md-card-title-text> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Cancel</md-button> 
     </md-card-actions> 
    </md-card> 
</div> 

Das Problem ist, dass es den Text nicht angezeigt werden soll. Also habe ich eine weitere Funktion in der Steuerung gemacht, die alle 100ms $scope.test protokolliert.

$interval(function() { 
    console.log($scope.test); 
}, 100); 

Das Merkwürdige ist nun, dass es wie das folgende Beispiel druckt:

Object { 
     objectOne: "some text", 
     objectTwo: "more text", 
     objectThree: { 
      text: "important text", 
      inf: "some info" 
     }, 
     objectFour: "even more text" 
     } 

-

undefined 

-

undefined 

Und weiter geht. einmal druckt das Objekt, dann 2 mal undefiniert. aber wenn ich einen vairable $scope.test2 = "test2text" außerhalb der Funktion definieren und dann meine html wie folgt aus:

<div> 
    <md-card> 
     <md-card-title> 
      <md-card-title-text> 
       <span class="md-headline">{{test2}}</span> 
      </md-card-title-text> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Cancel</md-button> 
     </md-card-actions> 
    </md-card> 
</div> 

es funktioniert und zeigt den Text auf der Seite, aber ich habe keine Ahnung, warum.

Hat also jemand eine Idee, warum es so ist? Wenn Sie weitere Informationen benötigen, fragen Sie einfach. Vielen Dank für die Zeit nehmen;)

Answer 1

Übergeben Sie nicht die $scope herum, es ist etwas wirklich schwierig und kann verwirrend sein.

Sie können jedoch eine service verwenden, um functions zu Ihrer Steuerung zur Verfügung zu stellen und sie von dort zu verwenden.

Siehe similar problem and workaround.