Угловые данные JS с фабрики в контроллер

Question

У меня есть простая страница с полем ввода и кнопкой для изменения имени. Имя изменяется на ng-клик кнопки, но то, что я хочу сделать, ниже текста приветствия {{name}}, чтобы иметь журнал выбранных предыдущих имен и время их выбора. например

Здравствуйте Том

• сэм - 1414530148463
• Мик - 1414530159015

Я попытался ниже в этой скрипке http://jsfiddle.net/4ybmyf1a/2/ но получаю сообщение «не могу прочитать свойство нажима не определено '(Я прокомментировал в myCtrl так, чтобы скрипка работала)

<div ng-controller="MyCtrl"> 
     <input type="text" ng-model="updatedname" /> 
     <input type="button" value="Change name" ng-click="changeName(updatedname)"/> 
     <br/> 
      Hello, {{name}}! 

    <ul> 
     <li ng-repeat="names in namelog">{{nameLog.value}} - {{nameLog.time}}</li> 
    </ul>  
    </div> 


    var myApp = angular.module('myApp',[]); 
    myApp.factory('UserService', function() { 
       var userService = {}; 
       userService.name = "John"; 
       userService.ChangeName = function (value) { 
        userService.name = value; 
       }; 
       userService.NameLog = function (value) { 
        userService.nameLog.push ({ 
         "value":value, 
         "time" :Date.now() 
        }); 
       }; 
     return userService; 
    }); 

    function MyCtrl($scope, UserService) { 
     $scope.name = UserService.name; 
     $scope.updatedname=""; 
     $scope.changeName=function(data){ 
      $scope.updateServiceName(data); 
     } 
     $scope.updateServiceName = function(name){ 
      UserService.ChangeName(name); 
      //UserService.NameLog(name); 
      $scope.name = UserService.name; 
      //$scope.nameLog = UserService.NameLog; 
     } 
    } 

Я также рассмотрел добавление в userService.nameLog = [], чтобы остановить неопределенную проблему, однако это не толкает элементы, как я хочу.

 userService.NameLog = function (value) { 
      userService.nameLog = []; 
      userService.nameLog.push ({ 
       "value":value, 
       "time" :Date.now() 
      }); 
     }; 

Как я могу добиться этого?

Answer 1

Пара различных вещей.

Ваша заводская функция LogName ссылалась на себя при нажатии на запись в журнале.Это та вещь, вы хотите, чтобы объявить вне объекта службы (_nameLog) и использовать замыкание, чтобы вернуть его обратно (getNameLog)

myApp.factory('UserService', function() { 
     var _nameLog = []; 
     var userService = {}; 
     userService.name = "John"; 
     userService.ChangeName = function (value) { 
      userService.name = value; 
     }; 
     userService.logName = function (value) { 
      _nameLog.push ({ 
       "value":value, 
       "time" :Date.now() 
      }); 
     }; 
     userService.getNameLog = function(){ return _nameLog; } 
     return userService; 
}); 

Вы также с помощью нг-повтор неправильно:

<li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li> 

Вот рабочая версия: http://jsfiddle.net/sfqo2fn3/

Answer 2

Это ваша первая проблема:

<li ng-repeat="names in namelog">{{nameLog.value}} - {{nameLog.time}}</li> 

переменные вы должны получать доступ к такому ng-repeat является names, так что это правильная форма (я также переименовал переменный, чтобы иметь больше смысла):

<li ng-repeat="logEntry in namelog">{{logEntry.value}} - {{logEntry.time}}</li> 

И вторая проблема заключается в ваш контроллер, вот правильная версия:

function MyCtrl($scope, UserService) { 
    $scope.name = UserService.name; 
    // Add the name log to the scope here, not when you 
    // invoke the updateServiceName function 
    $scope.namelog = UserService.nameLog; 

    $scope.changeName = function(data){ 
     $scope.updateServiceName(data); 
    } 

    $scope.updateServiceName = function(name){ 
     UserService.ChangeName(name); 
     UserService.NameLog(name); 
     $scope.name = UserService.name; 
    } 
} 

В вашей версии, вы закомментировать следующий код:

//$scope.nameLog = UserService.NameLog; 

Это неправильно по двум причинам. Сначала случай переменной nameLog отличается в контроллере и в шаблоне (nameLog vs namelog). Во-вторых, вы назначаете ему ссылку на функцию NameLog, а не на объект nameLog (опять же, обратите внимание на случай).

Когда я внедрил эти изменения в свой скрипт, он начал работать правильно.

И, кстати, я думаю, что логика добавления записи в журнал при изменении имени пользователя должна быть в самой службе не в функции контроллера.

Answer 3

Я обновил jsfiddle с рабочей версией после изменения несколько вещей. Пожалуйста, обратитесь к нему.

http://jsfiddle.net/4ybmyf1a/4/

Эти изменения

<li ng-repeat="names in nameLog">{{names.value}} - {{names.time}}</li> 


myApp.factory('UserService', function() { 
      var userService = {}; 
      var nameLog = []; 
      userService.name = "John"; 

      userService.ChangeName = function (value) { 
       userService.name = value; 
      }; 

      userService.addNameToLog = function (value) { 
       nameLog.push ({ 
        "value":value, 
        "time" :Date.now() 
       }); 
       return nameLog; 
      }; 

    userService.getNameLog = function() { 
     return nameLog; 
    } 

    return userService; 
}); 

Контроллер

function MyCtrl($scope, UserService) { 
    $scope.name = UserService.name; 
    $scope.updatedname=""; 

    $scope.changeName = function(data){ 
     $scope.updateServiceName(data); 
    } 

    $scope.updateServiceName = function(name){ 
     UserService.ChangeName(name); 
     UserService.addNameToLog(name); 
     $scope.name = UserService.name; 
     $scope.nameLog = UserService.getNameLog(); 
     console.log(JSON.stringify($scope.nameLog)); 
    } 
}