关于javascript：Angular：使用ng-include时，数字变量变为NaN


Angular: when using ng-include, number variable become NaN

本问题已经有最佳答案，请猛点这里访问。

当我尝试用ng分割HTML时有一个问题，包括：

这是我的index.html页面工作时的样子(prix=价格，tva=税)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="style.css" />
         TVA
    </head>
    <body>
       
           
                <input ng-model="tva" placeholder="TVA" /><br />
                <input ng-model="prix" placeholder="Prix" />
                <select ng-model="taxe">
                    <option>HT</option>
                    <option>TTC</option>
                </select>
                <button id="btn" ng-click="calcul()">Calculer</button>
                <p>
{{ total }}
</p>
           
     
     <script src="angular.min.js">
     <script src="script.js">
     </body>
     </html>

脚本：JS:

1
2
3
4
5
6
7
8
9
10
11
app = angular.module('app', []);

app.controller('appCtrl', ['$scope', function ($scope) {
    $scope.calcul = function() {
        if ($scope.taxe =="TTC") {
            $scope.total = parseInt($scope.prix) + $scope.prix * $scope.tva /100;
        } else if($scope.taxe =="HT") {
            $scope.total = 1/(1+$scope.tva/100)*$scope.prix;
        }
    };
}]);

因此，这样做的结果是一个数字(含税或不含税的价格)。

当我使用ng时，包括如下内容：

1
2
3
4
5
6
7
8
9
        <input ng-model="prix" placeholder="Prix" />
        <select ng-model="taxe">
            <option>HT</option>
            <option>TTC</option>
        </select>
        <button id="btn" ng-click="calcul()">Calculer</button>
        <p>
{{ total }}
</p>

我只想用一个新的HTML页面替换第一个输入。

TVA.HTML:

1
<input ng-model="tva" placeholder="TVA" /><br />

现在结果显示"nan"(我把这些代码放在服务器上，这样我就可以在线检查)。为什么会这样？

@Josh Beam回答并解释了ng-include在创建DOM时创建了一个子范围。我建议您在角度上使用dot rule，它将遵循该对象的原型继承，并且您的对象值将在子范围内访问。

现在，您的对象结构将更改为$scope.model={};，并且这个模型将具有所有的输入值。像所有人一样，model.prix、model.taxe和model.tva将成为原型继承。

标记

1
2
3
4
5
6
7
8
9
10
    <br />
    <input ng-model="model.prix" placeholder="Prix" />
    <select ng-model="model.taxe">
      <option>HT</option>
      <option>TTC</option>
    </select>
    <button id="btn" ng-click="calcul()">Calculer</button>
    <p>
{{ total }}
</p>

代码

1
2
3
4
5
6
7
8
9
10
app.controller('appCtrl', ['$scope', function ($scope) {
  $scope.model = {};
    $scope.calcul = function() {
        if ($scope.model.taxe =="TTC") {
            $scope.total = parseInt($scope.model.prix) + $scope.model.prix * $scope.model.tva /100;
        } else if($scope.model.taxe =="HT") {
            $scope.total = 1/(1+$scope.model.tva/100)*$scope.model.prix;
        }
    };
}]);

TVA.HTML

1
<input ng-model="model.tva" placeholder="TVA" /><br />

演示插件

相关讨论

原因是当包含HTML时，ng-include在作用域下创建了一个新作用域，但是您可以通过指定$parent访问父作用域。

1
<input ng-model="$parent.tva" placeholder="TVA" /><br />

一个更好的方法是为控制器提供一个别名，这样子控制器访问特定的父对象就可以从语义上清楚地看到它。

1
 

…在另一个文件中：

1
<input ng-model="vmMain.tva" placeholder="TVA" /><br />

简短回答：在这种情况下不要使用ng-include。

长话短说：ng-include创建了一个新的子范围，所以ng-include中的ng-model不是appCtrl的TVA。我看不出这里使用ng-include的原因，不管怎样，没有它，您的代码就可以了。

所以基本上你得到的是NaN(不是数字)，因为在使用ng-include时，$scope.TVA从未被设置过…您试图将一个未定义的变量乘以另一个数字，该数字返回NaN：

output