0

いつもありがとうございます。私はAngularが初めてで、徐々に複雑になっているチュートリアルからtodoappを構築することで学ぼうとしています。

私が今抱えている課題は、ユーザーがパスポート経由でログインしたときに更新され、コントローラー間で状態を共有できるグローバル変数 isLoggedIn を設定する最良の方法を理解しようとすることです。

これが私のコードです：

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

todoApp.service('TodoFactory', function() {

this.isLoggedInGlobal = false;

});



todoApp.controller('mainController', ['$scope', '$http', 'TodoFactory', function($scope, $http, TodoFactory) {
    $scope.formData = {due: new Date()};;
    $scope.isLoggedInGlobal = TodoFactory.isLoggedInGlobal;
    $scope.todoData = {deleted: false};

        $scope.getUserTodos = function() {
        $http.get('/api/todos/users')
            .success(function(data) {
              console.log(data)
                $scope.todos = data;
                $scope.isLoggedInGlobal = true;
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
          }

    // when submitting the add form, send the text to the node API
    $scope.createTodo = function() {
        $http.post('/api/todos', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // clear the form so our user is ready to enter another
                //$scope.todos = data; no longer needed in favor of the below function
                $scope.getUserTodos();
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    // delete a todo after checking it
    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id)
            .success(function(data) {
              //$scope.todos = data; no longer needed in favor of the below function
              $scope.getUserTodos();
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

        $scope.markComplete = function(id) {
        $http.get('/api/todos/complete/' + id)
            .success(function(data) {
              $scope.deleted = true;
              //$scope.todos = data; no longer needed in favor of the below function
              $scope.getUserTodos();
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

  }]);

todoApp.controller('userController', ['$scope', '$http', 'TodoFactory', function($scope, $http, TodoFactory) {
	$scope.loginData = {username: 'taylorackley@gmail.com', password: 'Vb578Vb578!'};
    $scope.welcome = "Hello "
    $scope.isLoggedInGlobal = TodoFactory.isLoggedInGlobal;

    // Auth Functions via passport.
        $scope.loginUser = function() {
        $http.post('/api/users/login', $scope.loginData)
            .success(function(data) {
                $scope.loginData = {}; // clear the form so our user is ready to enter another
                $scope.user = data;
                console.log($scope.isLoggedInGlobal);
                console.log(TodoFactory.isLoggedInGlobal);
                $scope.isLoggedInGlobal = true;
                TodoFactory.isLoggedInGlobal = true;
                console.log($scope.isLoggedInGlobal);
                console.log(TodoFactory.isLoggedInGlobal);
                console.log(data);
                $scope.getUserTodos()
              })

            .error(function(data) {
                console.log('Error: ' + data);
            });

    };

  • コントローラーにサービスを挿入し、スコープ変数として設定する場所を確認できます。
  • login 関数が userController で呼び出されると、ユーザー コントローラーの $scope 変数が true に更新されます... mainController 変数は更新されません。
  • もちろん、mainController のスコープ変数を更新することによる回避策があります...しかし、それはグローバル変数を持つという点をデフォルトにします。
  • また、単純な変数と別の方法の両方を関数として返す単純なファクトリも試しました。

todoApp.factory('mainFactory', function($scope) {

  var isLoggedInGlobal = false;
  return isLoggedIn;
});

  • 「TodoFactory」も 2 回リストアップしているため、少し混乱しています。最初の参照を「TodoFactory」から取り出すと、それを関数として渡す直前に未定義のエラーが発生します。

どんな助けでも大歓迎です。

4

1 に答える 1

1

サービスにプロパティを持たせるのではなく、ゲッターとセッターを用意します。

todoApp.service('loginService', function() {
    var _loggedIn;

    this.setLoggedIn = function (val) {
        _loggedIn = val;
    };

    this.isLoggedIn = function () {
        return _loggedIn;
    };
});

コントローラーでは、スコープ変数を使用するのではなく、loginService.isLoggedIn()誰かがログインしているかどうかを確認loginService.setLoggedIn(true)し、ログイン済みとして設定するために呼び出します。

あなたの現在のコードで$scope.isLoggedInGlobalは、あなたのコントローラーではへの参照ではありませんTodoFactory.isLoggedInGlobal。スコープ変数に割り当てると、値がコピーされます。したがって、両方を更新する必要があります。それらは完全に分離されています。

于 2015-03-24T19:53:44.500 に答える