Question

我有一个team_list页面和一个团队页面。用户将在team_list页面中拥有他们所在的团队列表，然后单击其中一个团队以转到其团队页面。我不确定如何发送用户将要访问的团队页面的数据是团队A的teampage或团队B的团队页面。那么如何在控制器之间共享数据呢？我知道我应该使用服务，但我不确定如何在这种情况下使用它们。我已经尝试了一些方法并注释掉了一些，但我仍然不确定如何去做。

使用node.js并表达后端框架

team_list.html：

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<head>
    <title>Team List</title>
</head>

<body>

<h1>
    Welcome to Your Team List Page!
</h1>

<!--<div ng-app="teamListPage" ng-controller="listController">
    <fieldset>
        <legend>Your Teams</legend>
        <ul>
            <li ng-repeat="x in [dave, david, darrell]">{{x}}</li>
            <input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/>
        </ul>
    </fieldset>
</div>-->

<div ng-app="teamListPage" ng-controller="listController">
    <li ng-repeat="x in records">
        {{x.team_name}}<br/>
        <input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/>
    </li>
    <input type="button" id="Create" name="Create" value="Create New Team" ng-click="enterCreateTeamPage()" />
</div>

<script>
    var page = angular.module('teamListPage', []);
    /*page.factory('myService', function() {
        var user_id = [];

        var setUserID = function(newObj) {
            user_id.push(newObj);
        };

        var getUserID = function(){
            return user_id;
        };

        return {
            setUserID: setUserID,
            getUserID: getUserID
        };
    });*/
    page.factory('myService', function(){
        return {
            data: {
                user_ID: ''
            },
            update: function(userID) {
                // Improve this method as needed
                this.data.user_ID = userID;
            }
        };
    });


    page.controller('listController', function($scope, $http, $window, myService) {
        console.log(myService.data);

        var login_http = $http({
            method: 'GET',
            url: '/team_req',
            params: { user_id: 1 }
        }).then(
                function (response) {
                    //$window.alert(response.data[0].team_name);
                    $scope.records = response.data;
                    //console.log($scope.records[1]);
                    //alert('successfull ...');
                }, function (response) {
                    $window.alert('wrong username/password');
                }
        )
        $scope.enterTeamPage = function() {
            $window.location.href = '/teamPage';
        };

        $scope.enterCreateTeamPage = function() {
            $window.location.href = '/createTeamPage';
        };

    })
</script>



</body>
</html>

team_page.html：

<!DOCTYPE html>
<html lang="en">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Team Page</title>
</head>
<body>
<h1>
    Team Page
</h1>

<div ng-app="teamPage" ng-controller="teamController">
    <form id="Communication Board">
        <fieldset>
            <legend>COMMUNICATION BOARD</legend>
            <h3>
                chat feature coming up!
            </h3>
            <legend>videocall</legend>
            <h4>
                video call feature coming up!
            </h4>
            <legend>screenshare</legend>
            <h5>
                screenshare feature coming up!
            </h5>
        </fieldset>
    </form>

    <form id="Data Board" action="">
        <fieldset>
            <legend>DATA BOARD</legend>
            <h6>
                calendar feature coming up!
            </h6>
            <legend>announcements</legend>
            <h7>
                All features are coming up very soon!
            </h7>
        </fieldset>
    </form>

    <p>
        <input type="button" id="CodingZone" name="CodingZone" value="Go to Coding Zone" ng-click="enterCodingPage()" />
    </p>
</div>

<script>
    var page = angular.module('teamPage', []);
    page.controller('teamController', function($scope, $http, $window) {

        //get the history of the chat board
        $scope.getChatHistory = function() {

            var create = $http({
                method: 'Get',
                url: '/chatHistory'
            }).then(
                    function successful(response) {
                        $scope.theResponse = response.data;
                    }, function unsuccessful(response) {
                        alert('got an error back from server');
                        $scope.theResponse = response;
                    });
        }

        $scope.enterCodingPage = function() {
            $window.location.href = '/codingPage';
        };
    })
</script>
</body>
</html>

我还应该将我的服务放在app.js或index.js中吗？

Answer 1

在控制器或组件（指令的包装器）之间共享数据的最佳方法是使用角度服务并将它们注入控制器。 Cuz服务是单例，因此每个服务都会为注入它的所有组件提供单一状态。

如何在AngularJS中的控制器之间共享数据？

1 个答案: