javascript - 如何将 $scope 中的值传递到 AngularJS 中的内部 Controller ?

标签 javascript angularjs

在我的 Angular app.js 中,它是我的 index.html 中的主 Controller ,我想要一个像这样的函数:

    $scope.login = function (user) {
        $scope.authenticating = true;
        var config = {
            method: 'POST',
            url: '/api/Account/Login',
            data: {
                'userName': user.loginUserName,
                'password': user.loginPassword,
                'rememberMe': user.loginRememberMe
            }
        };
        $http(config)
            .success(function (data) {         
                authentication.isAuthenticated = true;
                authentication.userName = user.loginUserName;
                localStorage.isAuthenticated = 'yes';
                $scope.template = $scope.templates[1];
                $state.transitionTo('home');
            })
    };

在我的用于 index.html 内模板的 Controller 中,我希望能够访问用户名。有人能告诉我该怎么做吗?最初,我尝试在 app.js 中设置 $scope.user = {},然后设置 $scope.user.userName,但是当我打开另一个模板及其位于 app.js 内部的 Controller 时,$scope 会发生变化。用户似乎不可见。

最佳答案

您可以使用服务在 Controller 之间共享数据

app.service('userService', function() {
  var user = {};

  setUserName = function(name) {
    user.name = name;
  };

  getUser = function(){
      return user;
  };
});

设置数据的 Controller

app.controller('FooController', ['$scope', 'userService',
    function ($scope, userService) {
        $scope.login = function (user) {
            $scope.authenticating = true;
            var config = {
                method: 'POST',
                url: '/api/Account/Login',
                data: {
                    'userName': user.loginUserName,
                    'password': user.loginPassword,
                    'rememberMe': user.loginRememberMe
                }
            };
            $http(config)
                .success(function (data) {
                    authentication.isAuthenticated = true;
                    userService.setUserName(user.loginUserName);
                    localStorage.isAuthenticated = 'yes';
                    $scope.template = $scope.templates[1];
                    $state.transitionTo('home');
                })
        };
    }
]);

其他 Controller ,检索数据

app.controller('BarController', ['$scope', 'userService', function($scope, userService) {
    var username = userService.getUser().name
});

由于您的检索是异步的,因此您可能需要向用户服务添加一些事件/回调机制,以便在设置/更改名称时 Controller 收到通知。

关于javascript - 如何将 $scope 中的值传递到 AngularJS 中的内部 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23425224/

相关文章:

angularjs - 两个指令共享同一个 Controller

javascript - 更改 jtable (jquery) 操作选项运行时

javascript - 如何修复这个业余的 jQuery/Masonry/Infinite Scroll 代码?

javascript - 将 javascript 参数传递到 D3

angularjs - 如果 ng-tags-input 中查询结果为空,如何显示 "No result found"消息?

javascript - 我怎样才能在angularjs中一个接一个地显示表格?

javascript - 跨源请求被阻止——这可以通过启用 CORS 来解决

Javascript 在二维数组中分割字符串

angularjs - 使用 jasmine 测试 angular.factory 时出现未知的提供程序错误

AngularJS 最佳实践