如何在不同的局部视图上呈现 AngularJs 表达式

Question

问题：

我的任务是计算来自 ASP .NET MVC 4 中不同 Partial Views 上不同 TextBoxes 的值，但它不起作用。

例如：

部分视图1：

TextBox1: 5

部分视图2：

TextBox2: 5

主视图：

TextBox1 + TextBox2 = 10

到目前为止我做了什么......

我的部分视图 1：

Number 1: <input type="number" ng-model="numberA">

我的部分视图 2：

Number 2: <input type="number" ng-model="numberB">

我的主视图：

<div data-ng-app="" data-ng-init="numberA=2;numberB=3">
    @Html.Partial("PartialView1", Model)
    @Html.Partial("PartialView2", Model)
    <p><b>Sum:</b> {{numberA + numberB}}</p>
</div>

问题：

• 为什么这不起作用？

• 解决此问题的最佳方法是什么？

Answer 1

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MyCtrl">
 <div ng-init="numberA=2; numberB=3">
    <input type="number" ng-model="numberA">
    <input type="number" ng-model="numberB">
    <p><b>Sum:</b> {{numberA + numberB}}</p>
 </div>
</div>

您的控制器在视图上的初始化位置在哪里？ 请使用ng-controller 指令来初始化您的控制器。

<div ng-controller="MyCtrl">
 <div ng-init="numberA=2; numberB=3">
    <input type="number" ng-model="numberA">
    <input type="number" ng-model="numberB">
    <p><b>Sum:</b> {{numberA + numberB}}</p>
 </div>
</div>

JS：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
}

这行得通。我在帖子中附上了一个例子。