javascript - 从 Angular 应用程序范围之外调用 AngularJS 函数

Question

我看到了很多与此事相关的问题，但我尝试过的解决方案都没有奏效:

在 public 文件夹中，我有一个名为 app.js 的文件，我在其中定义我的 AngularJS 应用程序，如下所示:

var app = angular.module('app', []);
var RectangleDim=30;

app.controller('MainCtrl', function($scope, $http) {

在文件的末尾，我执行如下 Bootstrap :

angular.bootstrap(document.getElementById('body'), ["app"]);

然后，在同一个文件夹和 HTML 中，我应用 AngularJS 的入口点是这样的:

 <div id="body">
<div ng-controller="MainCtrl">
    <div class="col-sm-6 col-md-6 col-lg-6" style="background-color: #D2D7D3">

        <div style="padding:25px;">

然后，在另一个文件夹中，我有另一个 JS 文件，我需要在其中调用 AngularJS 代码中定义的特定函数。该函数称为 Draw()，当我单击 AngularJS 按钮时会触发它。

为了简单地调用另一个文件中的函数而不点击任何按钮，我正在做这样的事情:

        var e = document.getElementById('body');
        var scope = angular.element(e).scope();
// update the model with a wrap in $apply(fn) which will refresh the view for us
        scope.$apply(function() {
            scope.Draw(NumQuest);
        });
        //fim

编辑: 为了让我的问题更清楚一点，我也许可以添加更多的细节:

我只需要一个 Controller 和一个模块来控制我的整个应用程序，因为所需的所有操作(调用更新 SVG 图片的 3 个函数)都是相对独立的，所以我认为没有任何需要增加客户端代码的复杂性，这只会让我和其他与我一起工作的人感到困惑。

记忆我需要的东西:

在一个带有一个 Controller 的应用程序中，我有一个函数 Draw(someInputValue)，它生成一个 SVG 图。正在从文本输入框接收此功能的输入。

在另一个文件上，我有 JS 操作，当我单击另一个文本框时会执行这些操作(例如，显示警报或创建其他文本框)。我想要的是在单击文本框时关联对 Draw(input) 的调用。

也就是说，我想模拟当我单击一个从文本框中读取数字并执行某些操作的按钮时的行为，而不是在文本框中手动输入输入并单击一个按钮，我只想单击一个文本框并执行相同的操作。

Answer 1

在这种情况下，您可能希望使用 $broadcast 来中继您的消息/数据，并使用 $on 来执行操作。

但是，这种做法应该是有限的，并且要明智地使用，以确保您不会有明显的性能下降。

Working with $scope.$emit and $scope.$on