how to pass value from one view to another view in angular js?

Question

I want to pass my first view textbox value to another view textbox. and both of that view are using a different controller.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
</head>
<body>
    <div ng-view="">

    </div>
</body>
</html>


<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/routeApp.js"></script>
<script src="../Scripts/Controller.js"></script>

This is my main page on which View1 and view2 HTML file will load.

"View1"

<div>
    <input type="text" name="fname" value="" ng-model="fname" />
    <a href="#/View2" >Link</a>
</div>

"View2"

<div>
    <input type="text" name="fname" value="" ng-model="fname" />
</div>

"routeApp.js"

var myApp = angular.module('myApp', ['ngRoute', 'yourApp']);
debugger
myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/',
    {
        templateUrl: 'View1.html',
        controller: 'View1'
    }).
    when('/View2',
    {
        templateUrl: 'View2.html',
        controller: 'View2'
    }).
    otherwise(
    {
        redirectTo: '/'
    });
}]);

"Controller.js"

var yourApp = angular.module("yourApp",[]);

yourApp.controller("View1", function ($rootScope, $scope) {
    debugger;
    $rootScope.abc = $scope.fname;
});

yourApp.controller("View2", function ($rootScope, $scope) {
    debugger;
    $scope.fname = $rootScope.abc;
});

My call is coming to controller but I know I did a mistake beacause of that i am not getting my value on View2.html page.

MrNobody007 · Answer 1 · 2016-10-21T08:46:55.427

0

At the time of assigning $rootScope.abc = $scope.fname, the value of $scope.fname is undefined. You need to save the value before you change your state. You can achieve it by using $destroy event:

$scope.$on("$destroy", function(){
   $rootScope.abc = $scope.fname;
});

Click here to view in Plunker

edited Oct 21 '16 at 08:46

answered Oct 21 '16 at 07:26

MrNobody007

1,827
11
32

though this answer is correct, I would suggest http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers – Sunil B N Oct 21 '16 at 07:28
@AnkitModi Here is the working plunker: https://plnkr.co/edit/nEmxRdUnrc2hZI61mYrt?p=preview – MrNobody007 Oct 21 '16 at 08:42
It's giving me error..that "Unable to connect to any application instances." – Ankit Modi Oct 21 '16 at 14:16

score 0 · Answer 2 · answered Oct 21 '16 at 07:46

Changes in "Controlle.js" and now it's working fine for me...

var yourApp = angular.module("yourApp",[]);

yourApp.controller("View1", function ($rootScope, $scope, $window) {
    debugger;
    $rootScope.abc = $scope.fname;

    $scope.shareData = function () {
        debugger;
        $rootScope.abc = $scope.fname;
        $window.location.href = "#/View2";
    }
});

yourApp.controller("View2", function ($rootScope, $scope, $window) {
    debugger;
    $scope.fname = $rootScope.abc;
});

how to pass value from one view to another view in angular js?

2 Answers2