如何将Angular作用域值传递给JavaScript变量？

我完全理解你因为依赖限制不得不混用Angular和原生JS的处境——虽然通常不推荐这种做法，但特殊场景下确实有必要。下面给你几个可行的实现方案：

方案一：直接赋值到全局window对象 #

这是最直接的方式，在Angular控制器内部把$scope.tn_id挂载到全局window对象上，原生JS就能直接访问：

var ProfileApp = angular.module('ProfileApp', []);
ProfileApp.controller('getprofile', function($scope,$http,$location){
    $scope.searchok = 1;
    $scope.tn_id = '5';
    
    // 将$scope的值绑定到全局变量
    window.nativeTnId = $scope.tn_id;
    
    // --- 省略其他Angular代码 ---
});

之后在原生JS代码里直接使用nativeTnId即可：

// 原生JS部分
console.log(nativeTnId); // 输出 '5'

方案二：通过Angular元素获取作用域 #

如果不想污染全局变量，可以借助Angular的angular.element方法，获取指定DOM元素对应的作用域，进而读取tn_id的值：

步骤1：确认控制器绑定的DOM元素 #

假设你的控制器绑定在某个元素上，比如：

<div ng-controller="getprofile">
  <!-- 页面内容 -->
</div>

步骤2：在原生JS中读取作用域值 #

// 原生JS部分
// 找到绑定了getprofile控制器的元素
var ctrlElement = document.querySelector('[ng-controller="getprofile"]');
// 获取该元素对应的Angular作用域
var scope = angular.element(ctrlElement).scope();
// 取出tn_id的值
var nativeTnId = scope.tn_id;

console.log(nativeTnId); // 输出 '5'

如果需要获取根作用域（$rootScope），可以定位到ng-app所在的元素：

var rootElement = document.querySelector('[ng-app="ProfileApp"]');
var rootScope = angular.element(rootElement).scope();
// 若之前把tn_id存入$rootScope，可直接读取
var nativeTnId = rootScope.tn_id;

关键注意事项 #

• 如果$scope.tn_id是通过异步请求（比如$http）获取的，必须等值更新完成后再读取原生变量。可以在Angular的回调里触发原生逻辑，或者用$timeout确保Angular的digest cycle完成：

  $http.get('/api/get-tn-id').then(function(response) {
      $scope.tn_id = response.data;
      // 异步完成后同步到原生变量
      window.nativeTnId = $scope.tn_id;
      // 或者直接调用原生JS函数处理
      handleTnIdInNative($scope.tn_id);
  });
  

• 尽量减少Angular和原生JS的混用频率，频繁跨环境操作容易引发数据同步问题，仅在必要场景使用上述方法。

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