从Angular应用程序的范围外调用AngularJS函数

14 浏览
0 Comments

从Angular应用程序的范围外调用AngularJS函数

我看到了很多与这个问题相关的问题，但是我尝试的没有一个解决方案起作用：

在public文件夹内，我有一个名为app.js的文件，我在其中定义了我的AngularJS应用程序，就像这样：

var app = angular.module('app', []);
var RectangleDim=30;
app.controller('MainCtrl', function($scope, $http) {

然后，在文件的结尾处，我执行引导：

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

然后，在同一个文件夹内和HTML内的我的入口点AngularJS应用程序，就像这样：

然后，在另一个文件夹中，我有另一个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

编辑：为了使我的问题更加清晰，我可以补充一些细节：

我只需要一个控制器和一个可以控制我整个应用程序的单个模块，因为所有所需的操作（调用3个更新SVG图片的函数）都相对独立，因此我认为不需要向客户端代码添加复杂性，这只会混淆我和与我一起工作的其他人。

来回忆一下我所需要的：

在一个单独的应用程序中，有一个控制器和一个函数Draw(someInputValue)，该函数正在生成一个SVG图片。这个函数的输入来自于一个文本输入框。

在另一个文件中，我有JS动作，当我单击另一个文本框时执行这些动作（例如，显示警报或创建附加文本框）。我想要的是在单击文本框时关联对Draw（input）的调用。

也就是说，我希望模拟当我单击一个按钮从文本框中读取一个数字并执行一些操作的行为，但是，与手动在文本框上输入输入并单击按钮不同，我希望只需单击文本框即可执行相同的操作。

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

HTML

  Hi

JS代码

angular.module('MyModule', [])
    .controller('MyController', function ($scope) {
    $scope.myfunction = function (data) {
        alert("---" + data);
    };
});
window.onload = function () {
    angular.element(document.getElementById('YourElementId')).scope().myfunction('test');
}

0
0 Comments

在这种情况下，您可以使用$broadcast来传递您的消息/数据，并使用$on来执行操作。

然而，应该有限制地使用这种方法，并明智地使用以确保你不会在未来受到明显的性能影响。

使用$scope.$emit和$scope.$on

0