javascript - Angular JS 将数据从工厂推送到 Controller

Question

我有一个简单的页面，其中有一个输入字段和一个用于更改名称的按钮。 单击按钮时名称会发生​​变化，但我想要发生的是在 hello {{name}} 文本下方，以记录以前选择的名称及其选择时间。 例如

你好汤姆

• 山姆 - 1414530148463
• 米克 - 1414530159015

我在这个 fiddle 中尝试了以下操作 http://jsfiddle.net/4ybmyf1a/2/但收到消息“无法读取未定义的属性推送”(我已在 myCtrl 中注释掉，以便 fiddle 可以运行)

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

您还错误地使用了 ng-repeat:

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

这是一个工作版本:http://jsfiddle.net/sfqo2fn3/