컨트롤러에 AngularJS 바인딩 서비스 변수

Question

저는 각도 멍청하고 내 서비스 중 하나에서 내 컨트롤러 중 하나에 변수를 바인딩하는 데 문제가 있습니다. 주제에 대해 적어도 12 개의 게시물을 읽었으며 아무 것도 나를 위해 일하는 것 같지 않습니다. 템플릿 여기

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; 
    }; 

}); 

된다 : 여기

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); 
    }; 

}]); 

는 서비스 : 여기

는 컨트롤러

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

나는 getSelectedTeam 기능 결합을 시도하고 서비스 변수 자체. 컨트롤러에 $ watch 함수를 설정해야합니까? 어떤 도움이라도 대단히 감사하겠습니다.

편집 : 그럼 내가 제대로 나는 이미 응용 프로그램에서 작성했다고 일하는 공급자 보았다 나는 아직도 나에게 도움이되지 않았다 공장으로 내 서비스를 전환하려고

. 나는 "팀 서비스"를 공급자로 전환하고 마침내 매력처럼 일했습니다. 공헌에 감사드립니다. 나의 새로운 공급자

코드 :

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; 
    }; 
}); 

Answer 1

제 편집에서 보았습니다. 내 서비스를 공급자로 변환하면 모든 변경 사항이 아무런 문제없이 뷰에 전파되는 것 같습니다. 여기서 일어나는 일에 대해 더 높은 수준의 이해를 얻으려면 공장, 서비스 및 제공 업체의 차이를 더 자세히 분석해야합니다.

Answer 2

코드의 주된 문제는 약속이 사용되는 방식이다. 서비스 내에서이를 수정하거나 컨트롤러에서 처리 할 수 ​​있습니다. ,

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; 
    }; 

}); 

당신은 또한 서비스 자체에서이 문제를 처리 할 수 ​​

컨트롤러 코드 :

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); 
      } 
     ) 
    }; 

}]); 

서비스 코드 후자의 예를 들어, 당신은 위와 같이 다시 쓸 수 있습니다 하지만 좀 더 많은 코드가 필요합니다. 중요한 것은 getTeam 호출이 비동기이며 적절한 약속 구조를 사용하여 처리해야한다는 것입니다.