Question

我已经看到很多与此事有关的问题，但我尝试过的解决方案都没有：

在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应用程序的入口点是这样的：

 <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

编辑：为了使我的问题更清楚，我可以添加更多细节：

我只需要一个控制器和一个模块来控制我的整个应用程序，因为所需的所有操作（调用3个更新SVG图片的函数）是相对自包含的，所以我认为没有任何操作需要增加客户端代码的复杂性，这可能会让我和其他与我合作的人感到困惑。

回忆我需要的东西：

在单个应用程序中，使用一个控制器，我有一个函数，Draw（someInputValue），即生成SVG图形。正在从文本输入框接收此功能的输入。

在另一个文件中，我有点击其他文本框时执行的JS操作（例如，显示警告或创建其他文本框）。我想要的是在单击文本框时将调用与Draw（输入）相关联。

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

Answer 1

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

但是，这种做法应该受到限制，并明智地使用，以确保您没有明显的性能影响。

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

Answer 2

HTML

<div id="YourElementId" ng-app='MyModule' ng-controller="MyController">
  Hi
</div>

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');
}

Answer 3

我相信Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on可以为此提供帮助。

正如您所看到的，如果您使用$scope.$emit，它会触发最多$scope的事件，因此，如果您使用$scope.$broadcast，则会触发事件。

最后使用$scope.$on是您将如何监听这些事件。

您可以通过下一个示例更好地理解：

// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');

// firing an event downwards
$scope.$broadcast('myCustomEvent', {
  someProp: 'Sending you an Object!' // send whatever you want
});

// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
  console.log(data); // 'Data to send'
});

从Angular App范围之外调用AngularJS函数

3 个答案: