将$ scope传递给Angularjs中的服务

Question

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

对于我的应用程序用户，输入UserName并将其通过ng-model传递回控制器，但这仅限于特定的控制器，其他控制器无法访问该范围。

我也研究了$ rootScope，但这不是答案。

有没有一种方法可以将用户名存储到服务中并将其传递给服务中的API，所以我不必担心它。 目前，我正在做与此职位类似的事情
将范围传递给AngularJS上的服务

到目前为止，我所提供的服务

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

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


        factory.getUserName = function(userName) {
            return $http.get(urlBase + "/users/" + userName);
        };
        factory.getUserRepo = function(userName) {
            return $http.get(urlBase + "/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：

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

    return model;
});

然后，您可以将其注入到要共享用户名的任何位置。 如果您只需要存储价值而不是行为，则可以使用更简单的价值配方：

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

您可以在此处找到更多信息：

• 提供者（angularjs.org）
• 工厂食谱（learn-angular.org）
• 价值配方（learn-angular.org）

Answer 3

您可以根据需要使用服务在其他控制器之间共享状态：

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 + "/users/" + this.userName, onAuthSuccess);
            return urlBase + this.userName;
        };
        factory.getUserRepo = function() {
            //$http.get(urlBase + "/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>

此插件的完整代码示例

Answer 4

我不知道这是否是您想要的，但您应该将userName声明为工厂属性。 并定义一次userName，然后在服务中调用userName属性。