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

    };

  • 您可以看到我将服务注入控制器的位置，并将其设置为范围变量。
  • 当在 userController 上调用登录函数时，用户控制器 $scope 变量会更新为 true ... mainController 变量不会。
  • 当然，可以通过更新 mainController 中的范围变量来解决这个问题……但这会默认使用全局变量。
  • 我还尝试了一个简单的工厂，它返回一个简单的变量和一个不同的方式作为函数。：

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

  var isLoggedInGlobal = false;
  return isLoggedIn;
});

  • 我也有点困惑，因为我还两次列出了“TodoFactory”。当我从“TodoFactory”中取出第一个引用时，就在我将它作为函数传递之前，我得到了一个未定义的错误。

任何帮助将不胜感激。

4

1 回答 1

1

我将有一个 getter 和一个 setter，而不是在服务中拥有一个属性：

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 回答