如何在 angularJS 中访问不同的 $scope答案

【问题标题】：How can I access different $scope in angularJS如何在 angularJS 中访问不同的 $scope
【发布时间】：2015-05-30 19:13:23
【问题描述】：

我正在尝试使用路由模板登录按钮中的 HomeCtrl 在导航中操作 ng-switch。无法弄清楚如何在不使用 rootscope 或父 hack 的情况下访问不同的 $scope 更清洁方式。请帮忙。

<body ng-app="myApp">

    <div class="nav" data-ng-controller="HomeCtrl">
        <div ng-switch on="loggedin">
            <p ng-switch-when="false">please login</p>
            <p ng-switch-when="true">Welcome</p>
        </div>
    </div>

    <div class="container" ng-view="">
        <!-- partial html -->
        <button type="button" ng-click="Login()">Login</button>
        <button type="button" ng-click="Logout()">Logout</button>
    </div>

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

angular.module('myApp', []);

angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {

  $scope.loggedin = false;

  $scope.Login = function() {
    $scope.loggedin = true;
  };
  $scope.Logout = function() {
    $scope.loggedin = false;
  };
}]);

</script>
</body>

【问题讨论】：

你到底需要什么？
我想做ng-switch，但是当按钮在控制器之外时代码不起作用
如果您将按钮放在控制器之外，代码将不起作用。您可以将 data-ng-controller="HomeCtrl" 放在标签上。
使用服务，code.angularjs.org/1.3.14/docs/guide/services，它们是在控制器之间共享信息和行为的正确方式。

标签： javascript angularjs scope angularjs-scope

【解决方案1】：

试试这个

<body ng-app="myApp" data-ng-controller="HomeCtrl">

而不是将其放在 div 中

【讨论】：

【解决方案2】：

使用嵌套控制器，并且您可以访问像

这样的父范围

  $scope.Login = function() {
    $scope.$parent.loggedin = true;
  };

  $scope.Logout = function() {
    $scope.$parent.loggedin = false;
  };

Demo

【讨论】：

【解决方案3】：

这是使用 Controller as 和 vm 语法的一个很好的理由。你可以在这里阅读：http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

试试这个jsfiddle 或下面的更新源。

<body ng-app="myApp">
    <div  data-ng-controller="HomeCtrl as vm">
        <div class="nav">
            <div ng-switch on="vm.loggedin">
                <p ng-switch-when="false">please login</p>
                <p ng-switch-when="true">Welcome</p>
            </div>
        </div>

        <div class="container" ng-view="">
            <!-- partial html -->
            <button type="button" ng-click="vm.Login()">Login</button>
            <button type="button" ng-click="vm.Logout()">Logout</button>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>

    angular.module('myApp', []);

    angular.module('myApp').controller('HomeCtrl', [function() {
        var vm = this;
        vm.loggedin = false;
        console.log('hello');
        vm.Login = function() {
            console.log(vm.loggedin);
            vm.loggedin = true;
        };
        vm.Logout = function() {
            console.log(vm.loggedin);
            vm.loggedin = false;
        };
    }]);

    </script>
</body>

【讨论】：

【解决方案4】：

维护登录状态和其他会话数据的服务将是一个合理的解决方案，因此避免范围共享黑客攻击。

只需在需要访问它的任何范围内注入服务，并在服务内维护状态。

https://docs.angularjs.org/guide/services

【讨论】：