如何在不同的局部视图上渲染AngularJs表达式

Question

问题：

我被赋予了一项任务，即在TextBoxes中的不同Partial Views上计算来自不同ASP .NET MVC 4的值，但它无效。

例如：

PartialView1：

TextBox1: 5

PartialView2：

TextBox2: 5

主要观点：

TextBox1 + TextBox2 = 10

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

我的PartialView 1：

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

我的PartialView 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) {
}

这很有效。我在帖子中附上了一个例子。