Hai*_*der 2 javascript jquery angularjs
所以我有这种情况，我有两种观点。一个视图从用户那里获取多个输入，第二个视图显示执行一些计算后的输入结果。由于两个视图都属于不同的 div，我必须分别为它们定义相同的 ng-controller。
现在的问题是输入视图中的更改没有反映在输出视图中。
var app = angular.module("app", []);
app.controller('controller',function ($scope) {
$scope.val1 = 10;
$scope.val2 = 0;
$scope.val3 = 0;
$scope.val4 = 0;
$scope.cal = function() {
return parseInt($scope.val1) + parseInt($scope.val2) + parseInt($scope.val3) + parseInt($scope.val4);
}
});<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<form action="#" ng-controller="controller">
<input type="text" ng-model="val1"><br>
<input type="text" ng-model="val2"><br>
<input type="text" ng-model="val3"><br>
<input type="text" ng-model="val4"><br>
Self:{{cal()}}
</form>
<div ng-controller="controller">
Other:{{cal()}}
</div>
</body>
</html>现在我可以通过将所有 val1、val2、val3 和 val4 输入重新定义为隐藏在输出视图中来使其工作，但这是一个带有冗余代码的丑陋解决方案。什么是正确的做法。
更新： 我的两个视图彼此相距甚远，并且它们之间存在大量代码。我不想找到一个共同的祖先 div 并将其分配给控制器，因为这将嵌套与它们之间的视图关联的其他控制器。这会使我的情况复杂化。
对此进行快速搜索，发现了另一个带有解释和答案的 SO 问题。
每次 Angular 编译器在 HTML 中找到 ng-controller 时，都会创建一个新的作用域。（如果你使用 ng-view，每次你去不同的路线时，也会创建一个新的范围。）
如果您需要在控制器之间共享数据，通常服务是您的最佳选择。将共享数据放入服务中，将服务注入到控件中
（不是我的回答——如果对你有帮助，请点赞）
| 归档时间： |
|
| 查看次数： |
1676 次 |
| 最近记录： |