AngularJS：サービスによって生成されたコントローラの値が機能していませんか？

HTML：AngularJS：サービスによって生成されたコントローラの値が機能していませんか？

<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>

コントローラー：

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

function NumCtrl(mathify) { 
    var ctrl = this; 

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

サービス：

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 
}

サービスは、HTMLスクリプトファイル内のコントローラの前に来ます。 ctrl.numとctrl.showfactorialの両方が表示されていません。しかし、コントローラでshowfactorialをコメントアウトすると、ctrl.numは正常に動作しています。私は間違って何をしていますか？

出典

2016-05-15 user298519

-1

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

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

htmlの値は、コントローラのスコープに割り当てられている場合にのみ使用してください。上記の例では、変数はローカルで宣言されていますが、スコープには適用されません。

出典

2016-05-15 20:20:14 bindaas

間違っている！ "controller as"構文を参照してください。彼はその部分を正しくやっている。 –

階乗関数は初期化時に定義されていないため（チェックしていないため）、コールスタックサイズを超えています。また、あなたの階乗関数は、あなたのコントローラの初期化時にのみ実行されます。

階乗結果をテンプレートに表示する場合は、変更時に階乗を設定するか、テンプレートの階乗関数を直接使用する必要があります。

この例では、テンプレートに直接階乗関数を用いて示している：http://jsfiddle.net/vq47ss7a/2/

HTML：

http://jsfiddle.net/vq47ss7a/3/

この例では、入力の変化にコントローラの表示値を更新示し

<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; 
}

出典

2016-05-15 20:31:36

これは、コントローラでctrl.numが初期化されていないためです。これにより、再帰的階乗サービスメソッドが許容される呼び出しスタックを超えます。ヌル値を考慮する必要があります。

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これは、開始に役立つはずです。私は$scope.$watchを使って、テキストボックスの値が変わったときに値を更新しました。あなたはおそらく少し違ったことをしたいと思うでしょう。

出典

2016-05-15 20:49:10 10BitDev

AngularJS：サービスによって生成されたコントローラの値が機能していませんか？

答えて

関連する問題