如何在angularJS中訪問其他$ scope

Question

我試圖使用導航模板登錄按鈕中的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>

Answer 1

試試這個

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

而不是將其放在div中

Answer 2

使用嵌套控制器，然后您可以訪問父作用域，例如

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

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

演示版

Answer 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>

Answer 4

維護登錄狀態和其他會話數據的服務將是一個合理的解決方案，因此避免范圍共享黑客。

只需將服務注入到需要訪問它的任何范圍內，並維護服務內的狀態。

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

如何在angularJS中訪問其他$ scope

問題描述

4 個解決方案

解決方案1
0 2015-05-30 19:38:15

解決方案2
0 2015-05-30 19:57:59

解決方案3
0 2015-05-30 20:16:10

解決方案4
0 2015-05-30 20:30:57

如何在angularJS中訪問其他$ scope

問題描述

4 個解決方案

解決方案1 0 2015-05-30 19:38:15

解決方案2 0 2015-05-30 19:57:59

解決方案3 0 2015-05-30 20:16:10

解決方案4 0 2015-05-30 20:30:57

解決方案1
0 2015-05-30 19:38:15

解決方案2
0 2015-05-30 19:57:59

解決方案3
0 2015-05-30 20:16:10

解決方案4
0 2015-05-30 20:30:57