Angular.js |共享 ngModel

Question

所以，这是我的 HTML。

<input type="text" id="ghusername" ng-model="username" placeholder="Github username...">
    <span id="ghsubmitbtn" ng-click="getUsers()">Pull User Data</span>

这是我的控制器A。

app.controller("homeController", ["$scope", "$http", function ($scope, $http) {
    $scope.getUsers = function () {
        $http.get("https://api.github.com/users/" + $scope.username)
          .success(function (data) {
              //some stuff
          })

这是 B（为了 post）。我如何在 HTML ngModel 上获取此用户名，以便我可以在另一个控制器中显示它？例如：

app.controller("reposController", ["$scope", "$http", function ($scope, $http) {
$scope.getRepos = function () {
    $http.get("https://api.github.com/users/" + $scope.username + "/repos")
        .success(function (data) {
            // some stuff
        })
};

我尝试过用户服务、工厂甚至 $rootScopes，但它们似乎不起作用，有什么帮助吗？顺便说一句，如果我不清楚，请告诉我，我会编辑 post，谢谢。

编辑： 我最终使用了 $rootScope，我知道这不是最好的主意，但这是一件小事。我会保留您的所有答案以供参考，因为我确定它们都能正常工作，但我太笨了，无法实现它们。谢谢。

Answer 1

您必须将 $rootScope 引用到您的控制器中：

app.controller("homeController", ["$scope", "$http","$rootScope", function ($scope, $http, $rootScope) ...

之后刚刚访问了 rootscope 变量：

控制器 1.11=] 控制器 2：$scope.controllerScopeValue = $rootScope.someValue；

Answer 2

使用service

app.service('name', [function(){}])

然后将'name'添加到controllers like

app.controller("reposController", ["$scope", "$http", 'name', function ($scope, $http, name) {

$scope.name = name;

然后你可以像

一样访问它

name.username

并在 html

<input type="text" id="ghusername" ng-model="name.username" placeholder="Github username...">

Answer 3

根据对您的数据模型的一些假设，这应该可行。

它创建了一个 shared 单例对象。一个控制器将用户（或任何数据）添加为其属性。然后其他控制器，或者实际上是同一个控制器，如果它被重新加载，然后可以访问 shared.

上的相同数据

注意这里 service 只是 returns 任何事物的单例，它不需要代码或方法。在这种情况下，使用 value 更容易，它是 shorthand 代表 function() { return {}; } 并且同样有效。

记得在需要的地方注入shared。

app.controller("homeController", ["$scope", "$http", "shared", function ($scope, $http, shared) {
    $scope.getUsers = function () {
        $http.get("https://api.github.com/users/" + $scope.username)
          .success(function (data) {
              shared.user = data.user; // or wherever it comes from
              //some stuff
          })

app.controller("reposController", ["$scope", "$http", "shared", function ($scope, $http, shared) {
$scope.getRepos = function () {
    $http.get("https://api.github.com/users/" + shared.user.name + "/repos")
        .success(function (data) {
            // some stuff
        })
};

app.value('shared', {});

Answer 4

尝试这样的事情

http://jsfiddle.net/devkickstart/nevyhdn0/2/

使用工厂，您可以像这样在控制器之间共享数据...

<div ng-app="myApp">
    <div data-ng-controller="reposCtrl">
        <input type="text" id="ghusername" ng-model="username" placeholder="Github username..." ng-init="getRepos()" />
        {{data}}
    </div>
    <div data-ng-controller="homeCtrl"> <span id="ghsubmitbtn" ng-click="getUsers()">Pull User Data</span>
    {{otherData}}
    </div>
</div>

angular.module("myApp", [])
.factory("dataFact", ["$rootScope", function ($rootScope) {
    var myData = "value from factory";
    return {
        getData: function () {
            return myData;
        },
        setData: function (newVal) {
            this.myData = newVal;
        }
    }
}]).controller("homeCtrl", ["$scope", "dataFact", function ($scope, dataFact) {
    $scope.getUsers = function () {
        $scope.otherData = dataFact.getData();
    }
}]).controller("reposCtrl", ["$scope", "dataFact", function ($scope, dataFact) {
    $scope.getRepos = function () {
        $scope.username = dataFact.getData();
    }
}]);

Angular.js |共享 ngModel

Angular.js | Sharing a ngModel

html

javascript

share

angularjs