Angularjs全局变量被作用域监听的正确姿势

AngularJS全局变量被作用域监听的正确姿势攻略

在AngularJS中，全局变量的监听是一个常见的需求。本攻略将详细介绍如何正确监听AngularJS中的全局变量，并提供两个示例说明。

步骤1：创建全局变量

首先，我们需要在AngularJS应用程序中创建一个全局变量。这可以通过在$rootScope上定义一个属性来实现。$rootScope是AngularJS中所有作用域的根作用域。

app.run(function($rootScope) {
  $rootScope.globalVariable = 'Hello World';
});

在上述示例中，我们在应用程序的run方法中定义了一个名为globalVariable的全局变量，并将其初始化为字符串'Hello World'。

步骤2：监听全局变量

接下来，我们需要在作用域中监听全局变量的变化。这可以通过在控制器或指令中注入$rootScope并使用$watch方法来实现。

app.controller('MyController', function($scope, $rootScope) {
  $scope.$watch(function() {
    return $rootScope.globalVariable;
  }, function(newVal, oldVal) {
    console.log('Global variable changed from', oldVal, 'to', newVal);
  });
});

在上述示例中，我们在MyController控制器中注入了$rootScope和$scope。然后，我们使用$watch方法来监听$rootScope.globalVariable的变化，并在变化发生时打印出旧值和新值。

示例1：监听全局变量的变化

<div ng-controller=\"MyController\">
  <p>{{ globalVariable }}</p>
</div>

在上述示例中，我们在HTML模板中使用双花括号语法({{ }})来显示全局变量的值。当全局变量发生变化时，模板会自动更新。

示例2：修改全局变量的值

<div ng-controller=\"MyController\">
  <input type=\"text\" ng-model=\"globalVariable\" />
</div>

在上述示例中，我们在HTML模板中使用ng-model指令将输入框与全局变量绑定。当用户在输入框中输入内容时，全局变量的值会自动更新。

通过以上两个示例，我们可以看到如何正确监听和修改AngularJS中的全局变量。请根据实际需求在应用程序中应用这些技巧。