将$ scope传递给Angularjs中的服务

Question

我想将$ scope传递给服务并将其存储在服务中，以便其他控制器可以使用它。

对于我的应用程序用户输入用户名和通过ng模型我传递给控制器​​，但它是非常有限的特定控制器和其他控制器不能访问该范围。

我也看过$ 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和之后在你的服务中调用userName属性。

Answer 3

您可以使用您的控制器和服务存储应用程序的状态，包括用户名之间共享的型号：

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

    return model; 
}); 

，无论你想分享的userName然后，您可以把它注射。如果你只需要存储的值，而不是行为，您可以使用简单的数值食谱：

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

你可以找到更多的信息有：

• Providers (angularjs.org)
• Factory recipe (learn-angular.org)
• Value recipe (learn-angular.org)

Answer 4

你可以分享你的状态在其他公司通过使用该服务ntrollers根据您的喜好：

的JavaScript：

(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