Angularjs의 서비스에 $ scope를 전달합니다.

Question

서비스에 $ scope를 전달하고 다른 컨트롤러에서 사용할 수 있도록 서비스에 저장하려고합니다.

내 응용 프로그램 사용자는 UserName을 입력하고 ng-model을 통해 컨트롤러로 다시 전달할 수 있지만 해당 컨트롤러에만 제한적이며 다른 컨트롤러는 해당 범위에 액세스 할 수 없습니다.

나는 $ rootScope도 살펴 봤지만 대답이 아닙니다.

서비스에이 사용자 이름을 저장할 수있는 방법이 있으며 서비스의 API에 전달하여 걱정할 필요가 없습니다. 현재 내가이 게시물에 비슷한 일을하고있는 중이 야
Pass scope to Service on AngularJS

이 내가 내 서비스

(function() { 
    var gitHubApiFactory = function($http) { 

     var urlBase = "https://api.github.com"; 
     var factory = {}; 


     factory.getUserName = function(userName) { 
      return $http.get(urlBase + "https://stackoverflow.com/users/" + userName); 
     }; 
     factory.getUserRepo = function(userName) { 
      return $http.get(urlBase + "https://stackoverflow.com/users/" + userName + "/repos"); 
     }; 
     factory.getRepoLang = function(userName,repoName) { 
      return $http.get(urlBase + "/repos/" + userName + "/" +repoName); 
     }; 
     return factory; 
    }; 

    gitHubApiFactory.$inject = ['$http']; 

    angular.module('gitHubApp').factory('gitHubApiFactory',gitHubApiFactory); 

}()); 

지금까지이 나는 대신에 그것을 전달 매개 변수 (사용자 이름) 매번 통과하고 싶지 않아 서비스.

angularjs에 대한 최고의 지원에 감사드립니다.

Answer 1

AngularJS의 서비스는 싱글 톤이므로 다른 사용자 이름을 사용하는 경우이 서비스에서 이름을 전달하는 것은 안전하지 않습니다. 함수에 필요한 모든 매개 변수를 전달하는 것이 좋습니다. 당신이 상수 이름을 전달하려는 경우

, 당신은 각 값 또는 일정를 작성하고 gitHubApiFactory에 주입 할 수 있습니다.

var myApp = angular.module('myApp', []); 
myApp.value('clientId', 'a12345654321x'); 

일정 만들기 :

는 값이 생성 값과 상수에 대한

myApp.constant('planetName', 'Greasy Giant'); 

상세 정보 : https://docs.angularjs.org/guide/providers

Answer 2

당신 당신이 원하는하지만 경우 나도 몰라 userName을 팩토리 속성으로 선언해야합니다. 그리고 일단 userName과 after를 서비스 호출에서 정의하면 userName 속성이 호출됩니다. 당신은 사용자 이름을 공유하여 원하는 목적지

이

angular.module('gitHubApp').factory('gitHubModel', function() { 
    var model = { 
     userName: ''; 
    }; 

    return model; 
}); 

당신은 다음을 삽입 할 수 있습니다

Answer 3

당신은 사용자 이름을 포함하여 응용 프로그램의 상태를 저장하여 컨트롤러와 서비스 사이에 공유 모델을 사용할 수 있습니다.

angular.module('gitHubApp').value('gitHubModel', { userName: ''}); 

당신이 더 많은 정보를 찾을 수 있습니다 :

• Providers (angularjs.org)
• Factory recipe (learn-angular.org)
• Value recipe (learn-angular.org)
만 값을 저장하지 행동을해야하는 경우, 간단한 값 조리법을 사용할 수 있습니다

Answer 4

다른 주 서비스를 사용하여 ntrollers 당신이 선호로 :

자바 스크립트 :이

(function(angular) { 

    function gitHubApiFactory($http) { 

     var urlBase = "https://api.github.com/"; 
     var factory = { 
      userName: '', 
      repoName: '', 
      authToken: '' 
     }; 

     function onAuthSuccess(data) { 
      // do something in here to persist user auth 
      // follow api instructions on what is returned in the response 
      factory.authToken = data.authToken; 
     } 

     factory.getUserName = function() { 
      // on success, onAuthSuccess function is called with the response 
      $http.get(urlBase + "https://stackoverflow.com/users/" + this.userName, onAuthSuccess); 
      return urlBase + this.userName; 
     }; 
     factory.getUserRepo = function() { 
      //$http.get(urlBase + "https://stackoverflow.com/users/" + this.userName + "/repos"); 
      return urlBase + this.repoName; 
     }; 
     factory.getRepoLang = function() { 
      // $http.get(urlBase + "/repos/" + this.userName + "/" + this.repoName); 
     }; 
     return factory; 
    } 
    gitHubApiFactory.$inject = ['$http']; 

    function HubLandingPageController($scope, gitHubApiFactory) { 
     // first controller will set the model 
     $scope.apiModel = gitHubApiFactory; 
    } 
    HubLandingPageController.$inject = ['$scope', 'gitHubApiFactory']; 

    // yet another controller to demo sharing of the factory state 
    function FooterController($scope, gitHubApiFactory) { 
     $scope.model = gitHubApiFactory; 
    } 
    FooterController.$inject = ['$scope', 'gitHubApiFactory']; 

    angular.module('gitHubApp', []) 
     .factory('gitHubApiFactory', gitHubApiFactory) 
     .controller('HubLandingPageController', HubLandingPageController) 
     .controller('FooterController', FooterController); 

}(angular)); 

HTML :이

<div ng-controller="HubLandingPageController"> 
    <p> 
     <label>What's your github name: 
      <input ng-model="apiModel.userName"> 
     </label> 
    </p> 
    <label>And the repo you'd like to load: 
     <input ng-model="apiModel.repoName"> 
    </label> 
</div> 

<div ng-controller="FooterController"> 
    <p ng-bind="model.getUserRepo()"></p> 
    <p ng-bind="model.getUserName()"></p> 
</div> 

전체 코드 예제 this plunker