Javascript 角度：使用ng include时，数字变量变为NaN

我尝试使用ng include对html进行分段时遇到问题：

这就是我的index.html页面工作时的样子（prix=price，TVA=tax）：

这是可行的，结果是一个数字（含税或不含税的价格）

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

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

HT
TTC
计算器
{{total}}

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

tva.html：

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

---

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

简短回答：在本例中不要使用

ng include

详细回答：

ng include

创建一个新的子作用域，因此

ng include

中的

ng model

不是

appCtrl

的

TVA

。我看不出有什么理由在这里使用

ng include

不管怎样，没有它，您的代码就可以了

因此，基本上您得到的是

NaN

（不是一个数字），因为在使用

ng include

时，

$scope.TVA

从未设置过。。。您试图将一个未定义的变量乘以另一个数字，该数字返回

NaN

：

---

原因是

ng include

在包含HTML时在作用域下创建了一个新的作用域，但是您可以通过指定

$parent

更好的方法是为控制器提供一个别名，这样子控制器在语义上就可以访问特定的父控制器

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

。。。在另一个文件中：

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

@Josh Beam回答并解释了

ng include

在创建DOM时创建子范围。我建议您在angular中使用

点规则

，该规则将跟随该对象，并且您的对象值将在子范围中访问

现在您的对象结构将更改为

$scope.model={}和此模型将具有所有输入值。like all将变成like
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>

tva.html

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




@Delphine这对你有帮助吗？谢谢你的快速回答，它现在起作用了@Delphine很高兴能帮助你..谢谢：）
<input ng-model="vmMain.tva" placeholder="TVA" /><br />

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

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