Wednesday 31 August 2016

AngularJS- How can I pass variables between controllers

AngularJS- How can I pass variables between controllers


<!DOCTYPE html>
<html ng-app="toDo" >
<head>
<meta name="description" content="Simplest Controllers sharing Service" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
  angular.module('toDo',[])

.service('dataService', function() {
  // private variable
  var _dataObj = {};
 
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  dataService.dataObj.end = "Yahoo";
  dataService.dataObj.begin = "customer";
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

;
  </script>
</head>
<body>
  REF: http://jsbin.com/tigebaguto/edit?html,js,output
  <div ng-controller="One">
    <div>Type and see your text in the other box:</div>
    <input ng-model="data.string">
     <input ng-model="data.string2">{{data.end}}
  </div>
 
  <hr>
 
  <div ng-controller="Two">
    <div>And now type here: </div>
    <input ng-model="data.string">
     <input ng-model="data.string2">{{data.end}}
  </div>
 
</body>
</html>

output:
---------

No comments:

Post a Comment