Передача $ 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.

Answer 3

Вы можете использовать модель общего между контроллерами и вашей службы, в котором хранится состояние приложения, в том числе имя пользователя:

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

    return model; 
}); 

Вы можете впрыснуть его везде, где вы хотите поделиться с именем пользователя.Если вам нужно только значение магазина и не поведение, вы можете использовать рецепт простого значения:

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