Angular：使用ng-include时，数字变量变为NaN [重复]答案

【问题标题】：Angular: when using ng-include, number variable become NaN [duplicate]Angular：使用ng-include时，数字变量变为NaN [重复]
【发布时间】：2015-09-09 19:08:04
【问题描述】：

当我尝试使用 ng-include 分段我的 html 时遇到问题：

这是我的 index.html 页面在运行时的样子（prix=price，TVA=tax）：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title> TVA </title>
    </head>
    <body>
        <div>
            <div ng-app="app" ng-controller="appCtrl">
                <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>
           </div>
     </div>
     <script src="angular.min.js"></script>
     <script src="script.js"></script>
     </body>
     </html>

script.js：

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-include 时：

<div>
    <div ng-app="app" ng-controller="appCtrl">
        <div ng-include="'tva.html'"></div>
        <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>
    </div>
</div>

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

tva.html：

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

现在结果显示“NaN”（我将这些代码放在服务器上，以便我可以在线查看）。这是为什么呢？

【问题讨论】：

标签： javascript angularjs declaration prototypal-inheritance angularjs-ng-include

【解决方案1】：

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

长答案：ng-include 创建了一个新的子作用域，因此ng-include 中的ng-model 不是appCtrl 的TVA。无论如何，我在这里看不到使用 ng-include 的理由，没有它你的代码也很好。

所以基本上你得到NaN（不是一个数字）因为$scope.TVA在使用ng-include时永远不会设置...你试图将一个未定义的变量乘以另一个数字，它返回@987654332 @：

【讨论】：

【解决方案2】：

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

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

更好的方法是为您的控制器指定一个别名，这样子控制器访问特定父级时在语义上就很清楚了。

<div ng-app="app" ng-controller="appCtrl as vmMain">
    <div ng-include="'tva.html'"></div>

...在另一个文件中：

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

【讨论】：

【解决方案3】：

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

现在您的对象结构将更改为$scope.model={};，并且此模型将具有所有输入值。 like all 会变成model.prix, model.taxe & model.tva 这样原型继承就会随之而来。

标记

<div ng-app="app" ng-controller="appCtrl">
    <div ng-include="'tva.html'"></div>
    <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>
</div>

代码

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

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

Demo Plunkr

【讨论】：

@Delphine 对你有帮助吗..？
感谢您的快速回答，现在可以使用了！
@Delphine 很高兴为您提供帮助..谢谢 :)