Question

HTML：

<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工作正常。我做错了什么？

Answer 1

您的阶乘函数超出了调用堆栈大小，因为它在初始化时未定义（并且您没有检查它）。此外，您的阶乘函数仅在控制器中初始化时运行。

如果您希望在模板中显示析因结果，则应在更改时设置阶乘，或直接在模板中使用阶乘函数。

此示例显示直接在模板中使用阶乘函数：http://jsfiddle.net/vq47ss7a/3/
此示例显示在更改输入时更新控制器中的显示值：http://jsfiddle.net/vq47ss7a/2/

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

Answer 2

从我看到这是因为ctrl.num没有在你的控制器中初始化。这将导致递归因子服务方法超过允许的调用堆栈。您需要考虑空值。

$scope.$watch

I have created an example plunker应该有助于您入门。我使用function[result] = sumGP(x,n) if x == 1 result = n+1; else result = (x^(n+1) - 1)/(x-1); end来更新文本框值更改时的值。你可能想要做一些不同的事情，虽然它看起来很乱。

Answer 3

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

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

仅当html中的值分配给控制器范围时才使用它们。在上面的示例中，变量在本地声明，但不适用于范围

AngularJS：服务生成的控制器中的值不起作用？

3 个答案: