从Javascript调用AngularJS控制器

Call AngularJS controller from Javascript

本文关键字：控制器 AngularJS 调用 Javascript      更新时间：2024-01-26

我正在客户端加载视图和脚本。我正在努力实现在我的javascript中加载并调用angularjs控制器。

  1. 加载容器视图（v1.html）、主脚本（例如myscript.js）和angular.js
  2. myscript.js将在v1.html和angular controller（controller.js）中加载视图（v2.html）
  3. v2.html为：CCD_ 1
  4. controller.js为：

angular.module('loadApp', []).controller('loadCtrl', function($scope) {
  $scope.load_msg = function(_msg) {
    $scope.msg = _msg;
  }
});

  1. 调用myscript.js:angular.element(document.getElementById('v1_id')).scope().load_msg('Hi')中的控制器

我得到的错误是Uncaught TypeError: Cannot read property 'load_msg' of undefined。

有没有想过，我在这里错过了什么？

非常感谢。

您可能还没有等到angular启动（编译）HTML，因此范围不可用。在运行javascript之前使用angular.element(document).ready。

angular.module('loadApp', []).controller('loadCtrl', function($scope) {
  $scope.load_msg = function(_msg) {
    $scope.msg = _msg;
  }
});
// Wait for angular to be bootstraped
angular.element(document).ready(function () {
  
  var scope = angular.element(document.getElementById('v1_id')).scope();
  
  // Since we are outside of angular world, we need to $apply the scope
  scope.$apply(function() {
    scope.load_msg('Hi');
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="v1_id" ng-app="loadApp"  ng-controller="loadCtrl">
  {{msg}}
</div>

相关文章：