javascript - 在 AngularJS 中访问全局 javascript 变量

Question

我正在做一个网站，在我意识到我需要一些动态框架之前就开始构建它。在学习了 AngularJS 之后，我决定在我需要的地方(而不是整个网站)使用它。

我有一个很长的 JS 脚本，我希望能够从 AngularJS 指令和 Controller 中获取和设置变量。

我找到了 this answer, 这非常好 - 我能够从函数中获取变量。但是当变量在函数外改变时，AngularJS 的变量不会更新。

我的代码看起来像这样:

JS:

var app = angular.module('someName', []);
var currentPage = 'Menu';

app.controller('PageController', ['$window','$scope', function($window,$scope){

    this.currentPage = $window.currentPage;

    this.isPage = function(page){
        return (page == this.currentPage);
    };
}]);


function button1onClick(){
    currentPage = 'Game';
}

HTML:

<div ng-controller="PageController">
    <div id="Game" ng-show="page.isPage('Game')">
        ...
    </div>
    <div id="Menu" ng-show="page.isPage('Menu')">
        ...
    </div>
</div>

(当我点击页面上的某个按钮时调用了 button1onClick)

我的想法是我有两次潜水要在两者之间切换，使用全局变量。 “菜单”页面一开始是可见的，但点击后我应该只能看到“游戏”部分。

controller里面的变量没有upadte，只是赋初值currentPage。

我决定在 isPage 函数中使用 $window 服务，但这也不起作用。只有当我调用一个测试 $window.currentPage 变量的函数时，页面才会切换——就像我想要的那样:

JS:

var app = angular.module('someName', []);

var currentPage = 'Menu';

app.controller('PageController', ['$window','$scope', function($window,$scope){

    this.isPage = function(page){
        return (page == $window.currentPage);
    };

    this.button2onClick = function() {
        $window.alert($window.currentPage);
    }
}]);


function button1onClick(){
    currentPage = 'Game';
}

HTML:

<button onclick="button1onClick()">CLICK ME</button> //Button 1
<div ng-controller="PageController">
    <button ng-click="page.button2onClick">CLICK ME</button> //Button 2

    <div id="Game" ng-show="page.isPage('Game')">
        ...
    </div>

    <div id="Menu" ng-show="page.isPage('Menu')">
        ...
    </div>
</div>

所以我能够更新页面的唯一方法是调用一个测试变量的函数，从而更新 AngularJS 中的变量。

有没有一种方法可以访问全局变量而不需要测试它来更新它？

我做错了什么吗？我不想将我的整个站点转换为 AngularJS 样式，我喜欢代码的原样。 AngularJS 不是适合我的框架吗？

编辑:

一些需要清除的东西:

1. 我是 AngularJS 的新手，所以如果您能解释一下您的答案是什么，那就太好了。

2. 我这样做而不是重定向到另一个页面的全部原因是不关闭 socket.io 的连接

Answer 1

OP，看看UI Router .

var app = angular.module("app", ['ui.router']);

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/main');

    $stateProvider.state('main', {
        controller: 'MainCtrl',
        templateUrl: 'main.html',
        url: '/main/'
    }).state('game', {
        controller: 'GameCtrl',
        url: '/game/',
        templateUrl: 'game.html'
    });
}]);

HTML 链接:

<a ui-sref="main">Go to Main</a>
<a ui-sref="game">Go to Game</a>

查看注入(inject)

<div ui-view="">
</div>