如何从普通JavaScript代码访问AngularJS $scope变量（非点击触发）

嘿，我懂你的需求——不需要通过点击事件触发，直接在页面独立的<script>标签里拿到Maincontroller中$scope.name的值对吧？其实有几个可行的方案，我给你详细说说：

方法一：通过DOM元素直接获取对应Scope #

AngularJS会给挂载了控制器的DOM元素绑定对应的scope实例，你可以借助AngularJS的angular.element方法来获取这个元素的scope：

// 先定位到挂载了Maincontroller的DOM节点
var ctrlElement = document.querySelector('div[ng-controller="Maincontroller"]');
// 转换成AngularJS的jqLite对象，再调用scope()方法拿到$scope
var targetScope = angular.element(ctrlElement).scope();
// 现在就能访问到name的值了
console.log(targetScope.name); // 输出 "Hello"

⚠️ 注意：如果你的AngularJS应用在生产环境中关闭了debugInfoEnabled（默认开启，生产环境建议关闭），这个方法会失效。你可以通过以下代码临时开启（不推荐生产环境用）：

angular.module('yourAppName').config(['$compileProvider', function($compileProvider) {
  $compileProvider.debugInfoEnabled(true);
}]);

方法二：通过Injector获取控制器或Scope #

如果不想依赖DOM结构，你可以通过AngularJS的注入器（$injector）来获取控制器实例或者根作用域：

// 获取当前AngularJS应用的注入器
var injector = angular.element(document.body).injector();
// 获取根作用域
var rootScope = injector.get('$rootScope');
// 实例化Maincontroller并传入新的子作用域
var mainCtrl = injector.invoke(['$controller', function($controller) {
  return $controller('Maincontroller', { $scope: rootScope.$new() });
}]);
// 访问控制器中的scope值
console.log(mainCtrl.$scope.name); // 输出 "Hello"

这个方法的优势是不依赖DOM结构，但要确保代码在AngularJS应用完全初始化完成后执行，否则会获取不到injector。

重要提醒 #

虽然以上方法能实现需求，但我还是要啰嗦一句：尽量避免在AngularJS的上下文之外直接操作scope，这不符合AngularJS的设计模式，容易导致数据双向绑定失效、代码难以维护等问题。如果可以的话，建议把相关逻辑整合到AngularJS的服务、指令或者控制器内部。

内容的提问来源于stack exchange，提问作者CodeWithCoffee