找到你要的答案

Q:Angular: when using ng-include, number variable become NaN [duplicate]

Q:角:当使用NG包括,数字变量成为南[副本]

This question already has an answer here:

I have a problem when i try to fragment my html with ng-include:

This is what my index.html page looks like when it works (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>

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

So this works, the result is an number (the price with or without tax).

When I use the ng-include like this:

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

I only tried to replace the first input with a new HTML page.

The tva.html :

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

Now the results show "NaN" (I put those codes on a server so that I can check online). Why is this?

这个问题在这里已经有了答案:

我有一个问题,当我试图用我的HTML片段包括NG:

这就是我的index.html页面看起来像是工作时(赛=价格,TVA =税):

<!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包括这样:

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

现在的结果显示“南”(我把这些代码在服务器上,以便我可以在线检查)。为什么会这样?

answer1: 回答1:

@Josh Beam Answered & explained ng-include creates a child scope on creating the DOM. I'd suggest you to use dot rule in angular that will follow prototypal inheritance on that object and you object value will access in child scope.

Now your object structure will changed to $scope.model={}; and this model will have all the input values. like all will become like model.prix, model.taxe & model.tva so that the prototypal inheritance will follow.

Markup

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

Code

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

@乔梁回答&;解释NG包括创建创建DOM子范围。我建议你在使用规则,将角点原型继承,对象和对象的价值将获得你孩子的范围。

现在,您的对象结构将更改为范围。像所有的会变得像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 />

演示plunkr

answer2: 回答2:

Short answer: don't use ng-include in this instance.

Long answer: ng-include creates a new child scope, so ng-model inside the ng-include isn't appCtrl's TVA. I don't see a reason here to use ng-include anyway, your code is fine without it.

So basically you're getting NaN (not a number) because $scope.TVA is never set when using the ng-include... you're attempting to multiply an undefined variable by another number, which returns NaN:

简短回答:不要使用NG包含在这个实例中。

长回答:NG包括创建一个新的子范围,所以NG模型里面的NG包括不appctrl的TVA。我没有看到这里使用NG的原因,包括无论如何,没有它你的代码是罚款。

所以基本上你得到楠(非数字)因为scope.tva美元是永远当使用NG包括…您试图将一个未定义变量乘以另一个数,返回楠:

answer3: 回答3:

The reason for that is the ng-include creates a new scope under the scope when the HTML was included, but you can access to the parent scope by specifying $parent

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

A better approach is give an alias to your controller, so it will be clear semantically to children controllers accessing to a specific parent.

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

... and in the other file:

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

原因是NG包括创建一个新的范围下的范围时,HTML被收录,但是你可以通过指定为父母访问父域

<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 />
javascript  angularjs  declaration  prototypal-inheritance  angularjs-ng-include