AngularJS Service Passing Data Between Controllers

I have a button when click it passes json data of everything within the table. I am trying to click in one controller and use a service to pass the data into the form controller.

<div class="col-md-7" ng-controller="LoadingmemberTable">


 <div  ng-controller="Controlclickevent">
 <tr ng-repeat="member in members">
                               
                                <td>
                                    {{member.name}}
                                </td>
                                <td>
                                    <button class="btn btn-primary btn-xs" ng-click="EditMember(member)">Select</button>
                                </td>
                              
                            </tr>
                        </tbody>
</div>
 <div class="col-md-5" ng-controller="formMember">
<div class="form-horizontal">
                            <fieldset>
                                <legend>Member Info</legend>
                                <div class="form-group">
                                    <label for="Name" class="col-lg-2 control-label" style="text-align:left">Name</label>
                                    <div class="col-lg-10">
                                        <input class="form-control"  ng-model="member.name" name="name" id="inputName" placeholder="Name" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="Name2" class="col-lg-2 control-label" style="white-space: nowrap;text-align:left">address</label>
                                    <div class="col-lg-10">
                                        <input class="form-control"  ng-model="model.address" placeholder="address" type="text">
                                    </div>
</div>
</div>
</div>
</div>

<!-- controller 1-->
app.controller("Controlclickevent", function ($scope, embersrepository) {
    $scope.EditMember = function (item) {
        
        model.item = function (item) {
            alert(item);
        };
       

    };
<!-- controller 2-->
app.controller("formMember", function ($scope, embersrepository) {
   

});

<!-- Factory service -->
app.factory('embersrepository', function ($http, $q) {
   
    return {
        DeleteMember: function (model) {
            var deferred = $q.defer();
            $http.post('/', model)
            .success(function () { deferred.resolve(); }
            )
             .error(function () { deferred.reject(); });
            console.log(model);
            return deferred.promise;
            
        }

    }
// I think its needed here..
    return {
        EditMember: function (scope) {
            function embersrepository(scope) {
                $scope.model = model;

            
            }

Open in new window

LVL 9
Seven priceFull StackAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
The quickest way is to expose the factory return object as a scope variable as showed here.
Try to change the value of the textbox and the <p> value will also change. Both controls are bound to variables in different scopes.
<div ng-app="myapp">
    <div ng-controller="Main">
        <h2 ng-bind="header"></h2>
        <p ng-bind="linkedData.mydata"></p>
        <div ng-controller="Another">
            <input type="text" ng-model="linkedData.mydata" />
        </div>
    </div>
<div>

Open in new window

// main angular app
angular.module('myapp', []);

// create a main controller
angular.module('myapp')
	.controller('Main', ['$scope', 'LinkData', function($scope, LinkData){
    	$scope.header='Bind to service';
        $scope.linkedData = LinkData;
    }]);

// create a another controller
angular.module('myapp')
	.controller('Another', ['$scope', 'LinkData', function($scope, LinkData){
    	$scope.linkedData = LinkData;
    }]);

// create a link factory
angular.module('myapp')
	.factory('LinkData', [function(){
        var mydata = 'Initial value';
        
    	return {
        	mydata: mydata
        }
    }]);

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
Also note that you have 2 return statements in your code.
Only the first one will be executed.

Another thing to be aware is that factories should be agnostic to UI. This means that $scope should never be injected into a factory (you actually can't but most of all there's a good reason behind).
0
Seven priceFull StackAuthor Commented:
ok but what you have does not make sense to me because of the order it is in. Looks nothing like my demo.

ok lets do this one more time .

Ok i change up I have a service.
app.service('srepository', function () {
    this.memberData = {};

    this.setData = function (data) {
        this.memberData = data;
    };

    this.getData = function () {
        return this.memberData;
    };
});

Open in new window


have a controller that initiates passing the data.  
*** Error always here I get Error: srepository.setData is not a function
app.controller("AlertMember", function ($scope, srepository) {
    $scope.EditMember = function (item) {

        notifier.notify('You have Added Member Name ' + item.name + ' to edit', 'my-notice-type');
        srepository.setData(item);
       // $scope.model = item;
    };

Open in new window


And in the last controller is what the form is wrapped in. This is where I am trying to load the values to the textbox.
, function ($scope, srepository) {

$scope.model = membersrepository.getData();
}

Thanks for you time.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Seven priceFull StackAuthor Commented:
better yet I set up a better example
http://plnkr.co/edit/EwjA3MN6s0hg9JvUQEMs?p=preview
0
Alexandre SimõesManager / Technology SpecialistCommented:
I just gave you an easier to read sample of a solution.
Once you have a service that links the two controllers, it really doesn't matter where the controllers are.
I'm not using scope inheritance here, it's the factory that is hosting the data for both services.

Here's the same sample code but now with both controllers at the same level: http://jsfiddle.net/AlexCode/un39hs53/1/
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ok, from your example it seems to be linking both controllers no?

What is missing in your example to achieve what you want?
0
Seven priceFull StackAuthor Commented:
Thanks that is great but I am using the ng-click to pass the value.
where does that fit in instead of 2 way binding method.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ok, I'll change the code to look a bit more like what you want.

Give me a minute
0
Seven priceFull StackAuthor Commented:
oh great I think i have it, i just need to see how this works using a ng-click event passing data.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Have a look at this to see if it's what you want:
http://jsfiddle.net/AlexCode/un39hs53/2/

I just mocked some data and clicking on the buttons displays the corresponding data in the "form"
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Seven priceFull StackAuthor Commented:
Great thanks. appreciated
0
Alexandre SimõesManager / Technology SpecialistCommented:
You're welcome mate.

Just want to add that this solution, although it works, is not the proper way of doing it.
Yesterday I didn't want to add confusion to the scenario but now that you have it working, I strongly advise you to change that for controller approach into a directive.

At the end it will be much easier because you won't need the "link" service anymore, you can simply set the directive input data.

Later I might have a bit of time to bake you a sample with it working with a directive if you want.

Cheers!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.