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

Question

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

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

我发现 this答案，这非常好 - 我能够从函数内获取变量。但是当变量在函数外部发生变化时，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)

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

Controller 内部的变量没有更新，只是赋予了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>