So I have this situation where I have two views. One view takes several inputs from the user, the second view shows the results of the inputs after performing some calculations. Since both the views fall under different divs I have to define same ng-controller for both of them separately.
Now the problem is that the changes in the input view are not being reflected in the output view.
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>Now I can make it work by redefining all the val1, val2, val3 and val4 inputs as hidden in the output view but that is an ugly solution with redundant code. What is the correct way of doing it.
Update: My both the views are far apart from each other and a lot of code lives between them both. I don't want to find a common ancestor div and assign it the controller as that will nest other controllers which are associated with the views in between them. This will complicate my situation.
A quick search for this found another SO question with explaination and answer.
Each time the Angular compiler finds ng-controller in the HTML, a new scope is created. (If you use ng-view, each time you go to a different route, a new scope is created too.)
If you need to share data between controllers, normally a service is your best option. Put the shared data into the service, and inject the service into the controlle
Using the same controller on different elements to refer to the same object
(not my response - please upvote that answer if it helps you out)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments