angularjs使用单个控制器与两个视图

所以我有这种情况，我有两个意见。一个视图需要来自用户的多个输入，第二个视图显示执行一些计算后的输入结果。由于这两个视图都属于不同的div，所以我必须为它们分别定义相同的ng控制器。angularjs使用单个控制器与两个视图

现在的问题是输入视图中的更改没有反映在输出视图中。

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"> 
 
    \t \t <input type="text" ng-model="val1"><br> 
 
    \t \t <input type="text" ng-model="val2"><br> 
 
    \t \t <input type="text" ng-model="val3"><br> 
 
    \t \t <input type="text" ng-model="val4"><br> 
 
    \t \t Self:{{cal()}} 
 
    \t </form> 
 
    
 
    \t <div ng-controller="controller"> 
 
    \t Other:{{cal()}} 
 
    \t </div> 
 
    </body> 
 

 
</html>

现在我可以使它通过重新定义所有VAL1，VAL2，VAL3和VAL4输入作为隐藏在输出视图，但是，其为丑陋溶液与冗余代码工作。什么是正确的做法。

更新： 我的观点是彼此相距很远，并有很多代码在他们之间生活。我不想找到一个共同的祖先div，并将它分配给控制器，因为它将嵌套与它们之间的视图相关联的其他控制器。这将使我的情况复杂化。

来源

2016-08-21 Haider

快速搜索这个发现的解释和回答另一个问题SO。

每当Angular编译器在HTML中找到ng-controller，就会创建一个新的作用域。（如果你使用NG-视图，每次去不同的路线的时间，创建一个新的范围了。）

如果您需要共享控制器之间的数据，通常一个服务是您最好的选择。把共享数据到服务，并注入服务到controlle

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

（不是我的回应 - 请给予好评这个问题的答案，如果它可以帮助你）

来源

2016-08-21 23:28:31 AndrewP

谢谢。对不起，我可以自己搜索它，这个问题正是我所要求的。 – Haider

你有2个控制器部分的任何特定原因？你应该只用同一个控制器管理你的两个div。

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

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" ng-controller="controller"> 
 
    <form action="#" > 
 
    \t \t <input type="text" ng-model="val1"><br> 
 
    \t \t <input type="text" ng-model="val2"><br> 
 
    \t \t <input type="text" ng-model="val3"><br> 
 
    \t \t <input type="text" ng-model="val4"><br> 
 
    \t \t Self:{{cal()}} 
 
    \t </form> 
 
    
 
    \t <div > 
 
    \t Other:{{cal()}} 
 
    \t </div> 
 
    </body> 
 

 
</html>

来源

2016-08-21 21:30:19 cyberwombat

我的两个观点彼此相距很远，并且大量的代码都存在于他们之间。我不想找到一个共同的祖先div，并将它分配给控制器，因为它将嵌套与它们之间的视图相关联的其他控制器。这将使我的情况复杂化。 – Haider

angularjs使用单个控制器与两个视图

回答

相关问题