CODEWITHSUNDEEP
javascriptjqueryangularjs
Haider
Haider

Reputation: 958

angularjs using single controller with two views

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.

Upvotes: 2

Views: 2083

Answers (2)

cyberwombat
cyberwombat

Reputation: 40064

Any particular reason you have 2 controller sections? You should just manage both of your divs with the same controller.

If you wish to maintain 2 controllers then you will want to communicate between them - this can be done with a simple service that you inject that will store your data. Alternatively, though that practice is sometimes frowned upon, you can use the $rootScope. The concept remains the same though.

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="#" >
  		<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>

Upvotes: 2

AndrewP
AndrewP

Reputation: 1618

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)

Upvotes: 5

Related Questions