Angular: 当使用 ng-include 时，number 变量变为 NaN

Question

当我尝试使用 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"（我把这些代码放在服务器上以便我可以在线查看）。这是为什么？

Answer 1

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

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

所以基本上你会得到 NaN（不是数字），因为在使用 ng-include 时从未设置 $scope.TVA...你试图乘以一个未定义的变量通过另一个数字，returns NaN:

Answer 2

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

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

Answer 3

@Josh Beam 回答并解释了 ng-include 在创建 DOM 时创建了一个子作用域。我建议您在 angular 中使用 dot rule ，它将跟随该对象的 prototypal inheritance 并且您的对象值将在子范围内访问。

现在您的对象结构将更改为 $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>

代码

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

Angular: 当使用 ng-include 时，number 变量变为 NaN

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

javascript

declaration

prototypal-inheritance

angularjs

angularjs-ng-include