2016-05-15 8 views
1

HTML:AngularJS: Wert in Controller generiert von Service funktioniert nicht?

<body ng-controller="NumCtrl as ctrl"> 
<input type="text" id="textbox" ng-model="ctrl.num"> 
    <h1>{{ctrl.num}}</h1> 

    <h3>Factorial</h3> 
    <p>{{ctrl.showfactorial}}</p> 

Controller:

angular 
.module('app') 
.controller('NumCtrl', NumCtrl) 

function NumCtrl(mathify) { 
    var ctrl = this; 

    ctrl.showfactorial = mathify.factorial(ctrl.num); 
} 

Service:

angular 
.module('app', []) 
.service('mathify', mathify) 

function mathify() { 

    this.factorial = function(num) { 
     if (num === 1) { 
      return 1; 
     } else { 
      return num * this.factorial(num-1); 
     } 
    }// end of factorial 
} 

Der Service kommt vor dem Controller in den HTML-Script-Dateien. Sowohl ctrl.num als auch ctrl.showfactorial werden nicht angezeigt. Aber wenn ich in der Steuerung showfactorial auskommentiere, funktioniert ctrl.num gut. Was mache ich falsch?

Antwort

-1
angular 
.module('app') 
.controller('NumCtrl', NumCtrl) 

function NumCtrl($scope, mathify) { 
//var ctrl = this; 
$scope.showfactorial = mathify.factorial(ctrl.num); 
} 

Verwenden Sie Werte im HTML nur, wenn sie dem Bereich des Controllers zugewiesen sind. Im obigen Beispiel ist die Variable lokal deklariert, gilt aber nicht für den Gültigkeitsbereich

+0

falsch! Nachschlagen "Controller als" -Syntax. Er macht diesen Teil richtig. –

1

Ihre faktorielle Funktion überschreitet die Call-Stack-Größe, da sie bei der Initialisierung nicht definiert ist (und Sie hatten keine Überprüfung dafür). Außerdem wird Ihre faktorielle Funktion nur bei der Initialisierung in Ihrem Controller ausgeführt.

Wenn das faktorielle Ergebnis in der Vorlage angezeigt werden soll, sollten Sie die Fakultät für die Änderung festlegen oder direkt die Fakultät in der Vorlage verwenden.

HTML:

<div ng-controller="NumCtrl as ctrl"> 
    <input type="text" id="textbox" ng-model="ctrl.num"> 
     <h1>{{ctrl.num}}</h1> 

     <h3>Factorial</h3> 
     <p>{{ctrl.factorial(ctrl.num)}}</p> 
    </div> 

JS:

function NumCtrl (mathify) { 
    var ctrl = this; 

    // get the function for use in the template 
    ctrl.factorial = mathify.factorial; 
} 
0

Von was ich sehe, ist dies, weil ctrl.num in Ihrem Controller nicht initialisiert wird. Dies führt dazu, dass Ihre rekursive faktorielle Service-Methode den zulässigen Aufruf-Stack überschreitet. Sie sollten NULL-Werte berücksichtigen.

this.factorial = function(num) { 
     if (!num) { 
     return 0; 
     } 
     if (num === 1) { 
     return 1; 
     } else { 
     return num * this.factorial(num - 1); 
     } 
    } // end of factorial 

I have created an example plunker, die Ihnen den Einstieg erleichtern sollten. Ich habe $scope.$watch verwendet, um den Wert zu aktualisieren, wenn sich der Textfeldwert ändert. Sie werden wahrscheinlich etwas anderes machen wollen, da es unordentlich aussieht.

Verwandte Themen