Passing values from controller to controller in AngularJs using Factory

Question

I trying to pass a value from controller1 to controller2 using factory on ng-click, now i have added routing

    var app = angular.module("myApp", ['ui.router']);

  app.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('ShowData', {
    url: '/ShowData',
    templateUrl: '../Pages/Show.html'
})
.state('EditData', {
    url: '/EditData',
    controller:'Editctrl',
    templateUrl: '../Pages/Edit.html'
})
    });

    app.controller('Controller1', function ($scope, $http, Phyfactory) {
    //Here I am calling a factory
    $scope.open = function (name) {

        var message = name;

        console.log('Hcpname', message);
        Phyfactory.set(message);
        $location.url('/EditData');

    // this is my second controller

    app.controller('Editctrl', function ($scope, Phyfactory) {
        alert('cntrl2');
$scope.fks = Phyfactory.get();
    });

I want to bind this value to textbox

    <div ng-controller="Controller2">
    Name: <input type="text" ng-model="fks" />
    </div>

//this is my factory

    app.factory("Phyfactory", function () {
      var phyname = {};

    function set(data) {
    phyname = data;
    alert('Inside set :' + phyname);
     }

function get() {
    alert('Inside get :' + Object.values(phyname));
    return phyname;
}
return {
    set: set,get:get
}

})

Adding HTML part for controller1 as requested, i am calling ng-click inside td

    <div ng-app="myApp" ng-controller="controller1"
    <table class="wtable">


        <tr>
            <th class="wth">
                A
            </th>
            <th class="wth">
                B
            </th>                
        </tr>
        <tr ng-repeat="tab in Phyperform | filter:search.view_nm|filter:search.time_period|filter:search.team_nm">
            <td class="wtd" ><a ng-click="open(tab.A)"> {{tab.A}} </a> </td>
            <td class="wtd"> {{tab.B}} </td>                
        </tr>
    </table>

Value is not passing to controller2 and not redirecting as well.

Any idea?

are you sure that the data from Html receives in Ctrl 1 and sets in Factory??? — MohammadJavad Seyyedi, Sep 23 '17 at 12:34
@MohammadJavadSeyyedi Yes.. When I click A selected values getting populated(i tried putting an alert) basically its a string say "Mike Bostock" i am trying to pass. — PradeepKumar, Sep 23 '17 at 12:37

MohammadJavad Seyyedi · Answer 1 · 2017-09-23T12:54:32.517

0

window.location.href

will redirect to out of the app, you must use routing with $location.

of course a better way to pass data between controllers is using event!

using event like below :

this is event receiver in controller 2:

$scope.$on('myCustomEvent', function (event, data) {
  console.log(data); // 'Data to send'
});

and this is the sender event in controller 1:

$scope.$emit('myCustomEvent', 'Data to send');

edited Sep 23 '17 at 12:54

answered Sep 23 '17 at 12:39

MohammadJavad Seyyedi

655
7
20

How would i do that using event please elaborate!! – PradeepKumar Sep 23 '17 at 12:47
This what i have done am i doing right? app.controller('Controller1', function ($scope, $http, Phyfactory) { //Here I am calling a factory $scope.open = function (name) { var message = name; console.log('Hcpname', message); $scope.$emit('myCustomEvent', message); }); app.controller('Controller2', function ($scope, Phyfactory) { alert('cntrl2'); $scope.$on('myCustomEvent', function (event, data) { alert(data); console.log(data); // 'Data to send' }); – PradeepKumar Sep 23 '17 at 13:27
@PradeepKumar yep It's right, but if not working, try to use $rootScope in the receiver event instead of $scope! – MohammadJavad Seyyedi Sep 23 '17 at 13:44
both not working $scope & $rootscope, how it can be done with routing? – PradeepKumar Sep 23 '17 at 14:14
first of all learn about events, it's easy and ready to use, but if you want to use routing, use $location , first inject it to controller then $location.path('path to go') – MohammadJavad Seyyedi Sep 23 '17 at 17:31

score 0 · Answer 2 · answered Sep 24 '17 at 09:23

0

Credit goes to this post "Sharing Data between pages in AngularJS returning empty"

I able to do using sessionStorage.

answered Sep 24 '17 at 09:23

PradeepKumar

11
4

Passing values from controller to controller in AngularJs using Factory

2 Answers2