Question

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

我在JS中有一个非常长的脚本，我希望能够从AngularJS指令和控制器中获取和设置变量。

我找到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。

控制器内的变量没有upadte，但只给出了currentPage的初始值。

我决定在$window函数中使用isPage服务，但这也不起作用。只有当我调用一个测试$ 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不是我的框架吗？

修改

要清除的一些事情：

我是AngularJS的新手，所以如果你能解释一下你的回答是什么，那就太棒了。
我这样做而不是重定向到另一个页面的全部原因不是关闭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>

查看注射

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

Answer 2

您不应将$window用作地图对象。您应该创建一个PageService：

angular.module('someName')
  .factory('Page', [function(){
    var currentPage = 'Menu';
    return {
      getPage: function() {
        return currentPage;
      },
      isPage: function(page) {
        return page === currentPage;
      },
      setPage: function(page) {
        currentPage = page;
      }
    }
  }]);

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

  this.currentPage = Page.getPage();
  this.isPage = Page.isPage;
  this.button10Click = function(){
    Page.setPage('Game');
  }
}]);

HTML

<div class="button" ng-click="page.button10Click()">Game</div>

Answer 3

在阅读 malix's answer 和 KKKKKKKK's answer 之后，经过一番研究，我能够解决我的问题，甚至写得更好寻找代码。

在示例中按照我的意愿切换div ，我使用ui-router，几乎与KKKKKKKK的方式完全相同。唯一的区别是我以程序化方式更改状态 - $state.go('menu')

要访问代码中其他位置的全局变量，我必须重新构建整个代码以适应AngularJS的结构，并使用 Service ，类似于malix的回答：

app.factory('Data', function(){
    var Data = {};
        //DEFINE DATA
    Data.stateChange = function(){};
    Data.menuData = {};
    Data.randomColors = ['#35cd96', '#6bcbef', '#E8E1DA', '#91ab01'];
        /RETURN DATA
    return Data;
});

Answer 4

可以使用$ rootScope完成。一次变量初始化可以在其他控制器中访问。

function Ctrl1($scope, $rootScope) {
    $rootScope.GlobalJSVariableA= window.GlobalJSVariable;  }

任何控制器＆amp;任何视图现在都可以访问它

function CtrlN($scope, $rootScope) {
    $scope.GlobalJSVariableA= $rootScope.GlobalJSVariableA; 
}

访问AngularJS中的全局javascript变量

4 个答案: