从Angular js

Question

我尝试创建一个小型服务来添加和获取。当我在一个控制器中单击注册（添加表单详细信息）时，我已成功添加了详细信息。现在我想在另一个控制器中使用该表单详细信息，但我没有得到它。我能够在get函数中获取该细节并能够在控制台中打印但我无法将它们传递给html

这是我的HTML：

<div id="inputArea" style="border: 1px solid blue;width: 800px;height: 45px;margin: auto;" ng-controller="MyFormCtrl">
        <form name="myForm" ng-submit="register()">
            <input class="inputfield" type="text" style="margin-left: 13px;" placeholder="enter first name" ng-model="user.fname">
            <input class="inputfield" type="text" style="margin-left: 13px;" placeholder="enter last name" ng-model="user.lname">
            <input class="inputfield" type="text" style="margin-left: 10px;" placeholder="enter designation" ng-model="user.designation">
            <input class="inputfield" type="text" style="margin-left: 10px;" placeholder="enter company" ng-model="user.company">
            <input type="submit" style="float:right;" value="Register"> </form>
    </div>


    <div id="box" style="position: relative;top:200px;margin: auto;border:1px solid red;width:180px;height:90px;" ng-controller="DetailsConroller">
        <input type="button"  ng-click="getDetails()" value="get">
           <!-- <input type="submit" style="" value="get">-->

        <ul>
        <li ng-repeat="x in employees"> {{ x.fname }} </li>
    </ul>
</div>

my js:
  var app = angular.module('myApp', []);
--->service for adding and get
app.service('employeeService', ['$rootScope', function ($rootScope) {
            var employeeList = [];
            return {
                employeeList: []
                , // var employeeList = [],
                add: function (item) {
                    employeeList.push(item);
                    console.log('employeeList', employeeList);
                }
                , get: function () {
                    // console.log('in to get employeeList',employeeList);
                    return employeeList
                }
            };
 }])
  ---->>    COntroller to Add:
    app.controller('MyFormCtrl', ['$scope', 'employeeService', function ($scope, employeeService) {
        $scope.user = {
            fname: ''
            , lname: ''
            , designation: ''
            , company: ''
        };
        $scope.register = function () {
            console.log('User clicked register', this.user);
            employeeService.add(this.user);
            //employeeService.updateUserData().set($rootScope.user);
        };
    }]);

--->>second controller to get:
    app.controller('DetailsConroller', ['$scope', 'employeeService', function ($scope, employeeService) {
        var employees = [];
        $scope.getDetails = function () {
            // console.log('User clicked register', this.user);
            employees = employeeService.get();
            console.log('User in to get', employees[0].fname);
            return employees;
        };

    }]);

我在这里做错了什么？

Answer 1

你需要一个$ scope变量，

像这样更改你的控制器，

app.controller('DetailsConroller', ['$scope', 'employeeService', function ($scope, employeeService) {
        $scope.employees = [];
       // console.log('User clicked register', this.user);
        $scope.employees = employeeService.get();
        console.log('User in to get', employees[0].fname);

 }]);