Angular JS数据无法在Javascript中读取及函数调用问题

一、Angular插值表达式{{}}无法在原生JavaScript中识别的问题 #

问题原因 #

Angular的{{}}插值表达式是在模板编译阶段由框架解析替换的，原生JavaScript代码运行时，这个表达式会被当作普通字符串处理，无法解析成实际的data.number值，自然找不到对应的DOM元素。

解决方案 #

不要混用原生DOM操作和Angular模板语法，改用Angular内置指令与数据绑定实现需求，这也是Angular的设计初衷：

1. 用ng-model绑定输入框的值
2. 用ng-disabled直接根据输入值控制按钮状态

修改后的代码示例：

<div ng-controller="CommentController">
  <textarea id="commentid" name="commentid" ng-model="commentValue"></textarea>
  <input type="image" id="{{data.number}}" ng-src="<?= $actual_link ?>{{iconsend}}" alt="Submit" ng-disabled="!commentValue">
</div>

<script>
angular.module('myApp', [])
.controller('CommentController', function($scope) {
  // 初始化输入值，假设data、iconsend已在当前作用域中
  $scope.commentValue = '';
});
</script>

如果必须保留原生JS写法（不推荐），可在Angular中把data.number暴露到全局，或给按钮添加固定类名通过类名获取元素：

<input type="image" class="submit-btn" id="{{data.number}}" ng-src="<?= $actual_link ?>{{iconsend}}" alt="Submit" disabled>

<script>
// 在Angular控制器中将data.number存入全局变量
angular.module('myApp', [])
.controller('CommentController', function($scope, $window) {
  $window.submitBtnId = $scope.data.number;
});

function myFunction2() {
  $("textarea").keyup(function() {
    var value = document.getElementById('commentid').value;
    var btn = document.getElementById(window.submitBtnId);
    btn.disabled = value === '';
  })
}
</script>

二、在原生JavaScript中调用AngularJS函数的方法 #

直接从原生JS调用Angular控制器内的函数，需先获取Angular作用域，再执行对应方法：

方法1：通过DOM元素获取作用域并调用函数 #

假设控制器绑定在某个DOM元素上：

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

原生JS中调用控制器函数的代码：

// 获取绑定控制器的DOM元素
var elem = document.querySelector('[ng-controller="MyController"]');
// 获取该元素对应的Angular作用域
var scope = angular.element(elem).scope();

// 调用控制器内的目标函数
scope.myAngularFunction();
// 若函数修改了作用域数据，需触发脏检查更新视图
scope.$apply();

方法2：通过$rootScope广播事件（更推荐） #

在Angular控制器中监听自定义事件：

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.$on('triggerMyFunction', function() {
    $scope.myAngularFunction();
  });

  $scope.myAngularFunction = function() {
    // 函数业务逻辑
  };
});

原生JS中广播事件触发函数：

var rootScope = angular.element(document.body).scope().$root;
rootScope.$broadcast('triggerMyFunction');
rootScope.$apply();

注意事项 #

• 尽量避免原生JS与Angular混用，会破坏Angular的数据绑定机制
• Angular 1.3及以上版本默认关闭全局作用域访问，若要直接暴露函数到全局需手动挂载到$window，但这种做法不推荐

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