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> 

Это мой контроллер А.

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 (для размещения сакэ). Как получить это имя пользователя в 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, но они просто не похоже на работу, никакой помощи? Кстати, если бы я был неясен, скажи мне, и я отредактирую пост, спасибо.

---

EDIT: Я закончил с использованием $ rootScope, я знаю, что это не самая лучшая идея, но это была незначительная вещь. Я сохраню все ваши ответы для справки, так как я уверен, что все они работают, но я слишком тупой, чтобы их реализовать .. Спасибо.

Answer 1

Вы должны в Refernce $ rootScope в контроллерах:

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

и после этого rootscope только доступ к переменным:

controller1: $rootScope.someValue = "some value"; Controller2: $scope.controllerScopeValue = $rootScope.someValue;

Answer 2

Использование service

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

Затем добавьте 'name' к обоим controllers как

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 просто возвращает одноэлементный код, ему не нужен код или методы. В этом случае вместо этого проще использовать value, что является сокращением для 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

Try что-то вроде этого

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(); 
    } 
}]);