Angular — получить данные в ng-Model из объекта в контроллере

Я не могу поместить данные в ng-модель для просмотра из объекта в контроллере.

ВИД1 :

<input type="text" class="user-input" name="profile.firstname" ng-model="profile.firstname" ng-minlength="2" required pattern=".{2,}" placeholder="E.g. Anvika" title="Please enter atleast 2 characters">

Когда я нажимаю кнопку в VIEW2, она запускает функцию (скажем, функцию «тест»).

ПРОСМОТР2

<input type="submit" ng-click="register.test()" ui-sref="doctorRegister" value="Profile">

КОНТРОЛЛЕР:

var app = angular.module('app');
app.controller('registerController', ['$scope', 'tempDataStorageService', function ($scope, tempDataStorageService) {


var register = this;
register.doctor = {};
register.test = function () {
    register.refreshProfile = tempDataStorageService.get(register.doctor.profile);
    //console.log(register.refreshProfile);
    var a = register.refreshProfile.firstname;
    console.log(a);     
}
}

Служба хранения временных данных:

var app = angular.module('app'); 
app.factory('tempDataStorageService', function() {
    var savedData = {};
    function set(data) {
        savedData = data;
    }
    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }
});

РЕДАКТИРОВАТЬ: я также попытался показать объявление контроллера, если это поможет. Как сделать так, чтобы когда я нажимаю кнопку «Профиль» на VIEW2, он заполнял VIEW1 данными?


angularjs angular-ui-router angular-ngmodel angularjs-ng-model angularjs-scope
person Sarthak Batra    schedule 21.01.2016    source источник
comment
Это весь ваш контроллер? Не могли бы вы предоставить объявление ng-controller и остальную часть вашего контроллера?   -  person lenilsondc    schedule 21.01.2016
comment
Привет, @LenilsondeCastro, весь контроллер огромен, я просто дал тебе те части, которые считал необходимыми. Тем не менее, позвольте мне абстрагироваться от кода и дать вам декларацию.   -  person Sarthak Batra    schedule 21.01.2016
comment
Привет @LenilsondeCastro ... Отредактировал и объявил контроллер.   -  person Sarthak Batra    schedule 21.01.2016
comment
Вы передаете параметр в tempDataStorageService.get(), но ваша функция get не принимает параметр.   -  person Will.Harris    schedule 21.01.2016
comment
вы объявляете свой контроллер с помощью controllerAs? потому что если нет, то вы не можете использовать var register = this; в контроллере, вместо этого вы должны привязать функции к $scope   -  person Will.Harris    schedule 21.01.2016
comment
Привет @Will.Harris .. Да, я объявил контроллер с помощью controllerAs.   -  person Sarthak Batra    schedule 21.01.2016
comment
Вы должны использовать controllerAs register, а затем в своем шаблоне ng-model="register.profile.firstName" и убедиться, что profile объявлено на вашем контроллере как this.profile или register.profile, если вы используете var register = this;   -  person lenilsondc    schedule 21.01.2016
comment
Да сэр. Сделал это уже. не работает. Вот почему я здесь, в стеке   -  person Sarthak Batra    schedule 21.01.2016
comment
Мы пока не знаем, как вы заполняете register.profile. Если вы используете controllerAs register, вы, кстати, должны использовать ng-model="register.profile.firstName" (ваш пример кода этого не показывает).   -  person lenilsondc    schedule 21.01.2016
comment
как насчет предоставления ссылки plnkr с приведенным выше кодом.??   -  person roxid    schedule 24.01.2016
comment
Эй, люди. Спасибо за помощь. Я решил избавиться от синтаксиса controllerAs и сделать контроллер только в маршрутизаторе пользовательского интерфейса, чтобы я мог связать модели с корневой областью и, наконец, заставить его работать. Все равно спасибо, народ. Это то, что я буду исследовать, когда у меня будет свободное время!   -  person Sarthak Batra    schedule 25.01.2016
comment
Почти уверен, что последний ответ Ленилсона привел бы к тому же результату. Если вы используете controllerAs, вы должны использовать register.profile.firstname.   -  person Daniel    schedule 27.01.2016
comment
Ага. Об этом говорится и в официальной документации. Я просто должен был закончить этот проект вовремя, поэтому я сделал то, что мог сделать быстро. В любом случае спасибо @Daniel ...   -  person Sarthak Batra    schedule 27.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Плункер:

Рабочий пример

HTML-код:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as mainCtrl">

    <form>
      <h2 class="text-primary">Get data into ng-Model from object in controller</h2>
      <hr>
      <div class="form-group">
        <h3 ng-class="!mainCtrl.firstName? 'text-danger' : 'text-success'">Enter Name</h3>
        <input type="text" class="form-control" ng-model="mainCtrl.firstName" placeholder="E.g. Anvika">
      </div>


      <hr>
      <h3 class="text-info">This is what you are typing: {{mainCtrl.firstName}}</h3>
      <button type="button" class="btn btn-success" ng-click="mainCtrl.test()">Save Name</button>
    </form>

    <hr>
    <h3 class="text-info">This is what is stored</h3>
    <h4>Doctor first name: {{mainCtrl.storedData.doctorFirstName}}</h4>
  </body>

</html>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) {

  var register = this;

  register.firstName = "";

    register.storedData = tempDataStorageService;

    register.test = function () {
      tempDataStorageService.setName(register.firstName);
    }

}]);


app.factory('tempDataStorageService', function() {
    // The service object
    var profile = {};

    profile.doctorFirstName = "No doctor data stored";

    //The functions

    profile.setName = function(data) {
        profile.doctorFirstName = data;
    }

    profile.getName = function() {
        return profile.doctorFirstName;
    }

    // return the service object
    return profile;
});

Рекомендации:

  1. Пожалуйста, правильно форматируйте код, когда задаете вопросы.
  2. В качестве хорошей практики используйте руководство по стилю. Хорошей отправной точкой является Руководство по стилю Angular Джона Папы.
person Wilmer SH    schedule 03.02.2016