AngularJS binding service variable to controller

Question

I am a Angular noob and having problems with binding a variable from one of my services to one of my controllers. I have read at least a dozen posts on the subject and nothing seems to be working for me.

Here is the controller:

app.controller('TeamController', ['$scope', '$modal', 'teamService', function ($scope, $modal, teamService) {
    $scope.teamService = teamService;
    $scope.selectedTeam = null;



    $scope.selectTeam = function(teamId){
        $scope.selectedTeam = teamService.getTeam(teamId, $scope.login.loginId);
    };

}]);

Here is the service:

angular.module('teamService', [])
.service('teamService', function($http, $q){
    this.selectedTeam = {teamId:-1, teamName:"Select a team", teamLocationName:"", teamDescription:"", teamManaged:false};
    this.userTeams = [];

    this.getTeam = function(teamId, loginId) {
        var postData = {teamId: teamId, loginId: loginId};
        var promise = $http({
            url: "/url-for-getting-team",
            method: "POST",
            data: postData
        });
        promise.success(function (data) {
            if (data.status === "success") {
                this.selectedTeam = data.response;
                return data.response;
            }
        });
        promise.error(function () { //TODO handle getTeam errors
            return {};
        });
    };


    this.getSelectedTeam = function(){
      return this.selectedTeam;
    };

 });

And here is the template:

<div class="jumbotron main-jumbo" ng-controller="TeamController">
    <h1>{{selectedTeam.teamName}}</h1>
</div>

I have tried binding to the getSelectedTeam function and the service variable itself. Do I need to set up a $watch function in the controller? Any assistance would be greatly appreciated.

EDIT:

I tried turning my service into a factory, which still did not help me, so then I looked at a provider that was properly working that I had already written in the application. I converted my "teamService" into a provider and finally worked like a charm. Thanks for the contributions guys.

Code from my new provider:

angular.module('teamService', [])
.provider('teamService', function () {
    var errorState = 'error',
        logoutState = 'home';

    this.$get = function ($rootScope, $http, $q, $state) {

        /**
         * Low-level, private functions.
         */


        /**
         * High level, public methods
         */
        var wrappedService = {
            /**
             * Public properties
             */
            selectedTeam: {teamName:"Select a team"},
            userTeams : null,
            createTeam: function(loginId, name, description, locationName, managed){
                var postData = {loginId:loginId, teamName:name, teamDescription:description, teamLocationName:locationName, teamManaged:managed};
                var promise = $http({
                    url: "/create-team-url",
                    method: "POST",
                    data: postData
                });

                return promise;
            },

            getTeam: function(teamId, loginId) {
                var postData = {teamId: teamId, loginId: loginId};
                var promise = $http({
                    url: "/get-team-url",
                    method: "POST",
                    data: postData
                });

                promise.success(function (data) {
                    if (data.status === "success") {
                        wrappedService.selectedTeam = data.response;
                    }
                });
                promise.error(function () { //TODO handle getTeam errors
                    wrappedService.selectedTeam = {};
                });
            },

            getUserTeams:  function(loginId) {
                var postData = {loginId: loginId};
                var promise = $http({
                    url: "/team-list-url",
                    method: "POST",
                    data: postData
                });
                return promise;
            },

            joinTeam:  function(teamId, loginId){
                var postData = {teamId:teamId, loginId:loginId};
                var promise =$http({
                    url: "/join-team-url",
                    method: "POST",
                    data: postData
                });
                return promise;
            },

            getSelectedTeam: function(){
                return wrappedService.selectedTeam;
            }
        };

        return wrappedService;
    };
});

Clay Parker · Accepted Answer · 2014-07-15 06:38:13Z

1

As seen in my edit. I converted my service into a provider and all the changes seem to propagate to the view with no issues. I need to further analyze the difference between the factory, service, and provider in order to gain a higher understanding of what is going on here.

answered Jul 15, 2014 at 6:38

Clay Parker

311 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rchawdry · Accepted Answer · 2014-07-15 04:45:08Z

The main issue with the code is the way that promises are used. You can either correct that within the service, or handle it in the controller. As an example of the latter, you can re-write the above as:

Controller Code:

app.controller('TeamController', ['$scope', '$modal', 'teamService', function ($scope, $modal, teamService) {
    $scope.teamService = teamService;
    $scope.selectedTeam = null;

    $scope.selectTeam = function(teamId){
        teamService.getTeam(teamId, $scope.login.loginId).then(
            function(result){
                $scope.selectedTeam = result.data;
            },
            function(error){
                console.log(error);
            }
        )
    };

}]);

Service code:

angular.module('teamService', [])
.service('teamService', function($http, $q){
    this.selectedTeam = {teamId:-1, teamName:"Select a team", teamLocationName:"", teamDescription:"", teamManaged:false};
    this.userTeams = [];

    this.getTeam = function(teamId, loginId) {
        var postData = {teamId: teamId, loginId: loginId};
        return $http({
            url: "/url-for-getting-team",
            method: "POST",
            data: postData
        });
    };


    this.getSelectedTeam = function(){
      return this.selectedTeam;
    };

 });

You can also handle this in the service itself, but it requires a little more code. The key thing is that the getTeam call is asynchronous and needs to be handled using proper promise constructs.

I was not able to get this work. I think that the problem is that the changes are not being detected on the view.

Collectives™ on Stack Overflow

AngularJS binding service variable to controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related