Question

所以我有这种情况，我有两个观点。一个视图从用户获取多个输入，第二个视图显示执行某些计算后的输入结果。由于两个视图都属于不同的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并将其分配给控制器，因为它将嵌套与它们之间的视图相关联的其他控制器。这会使我的情况复杂化。

Answer 1

对此的快速搜索发现另一个SO问题，解释和答案。

每次Angular编译器在HTML中找到ng-controller，都是新的   范围已创建。（如果你使用ng-view，每次去另外一个   路线，也会创建一个新的范围。）

如果您需要在控制器之间共享数据，通常是服务   你最好的选择。将共享数据放入服务，然后注入   服务到控制器

Using the same controller on different elements to refer to the same object

（不是我的回答 - 如果它可以帮助你，请提供答案）

Answer 2

你有2个控制器部分有什么特别的原因吗？您应该使用相同的控制器管理两个div。

如果您希望维护2个控制器，那么您需要在它们之间进行通信 - 这可以通过您注入的将存储数据的简单服务来完成。或者，虽然这种做法有时不受欢迎，但您可以使用$ rootScope。但这个概念仍然保持不变。

＆＃13;

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

＆＃13;

<!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" ng-controller="controller">
    <form action="#" >
  		<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 >
  	  Other:{{cal()}}
  	</div>
  </body>

</html>

＆＃13;

angularjs使用具有两个视图的单个控制器

2 个答案: