Question

一如既往地谢谢你。我是Angular的新手，并试图通过逐渐变得更复杂的教程构建todoapp来学习。

我现在面临的挑战是尝试了解设置全局变量isLoggedIn的最佳方法，该变量将在用户通过护照登录时更新，并且状态可以在控制器之间共享。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

todoApp.factory('mainFactory', function($scope) {

  var isLoggedInGlobal = false;
  return isLoggedIn;
});

＆＃13;

我也有点困惑，因为我也列出了“TodoFactory”＃39;两次。当我把第一个参考文献带到TodoFactory＆＃39;时，就在我作为一个函数传递它之前，我得到一个未定义的错误。

非常感谢任何帮助。

Answer 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的引用。分配给范围变量时，将复制该值。所以你必须更新两者。它们完全是分开的。

Angular 1.3.9 |当控制器2发生变化时，控制器1中的服务不会更新

1 个答案: