如何从单独的 js 文件中调用有角度的 $scope 函数？

Question

我正在调试别人的软件。它使用 Angular 1.5.9，我对它不是很熟悉，也无法找到我问题的答案。我想从单独的 js 文件中的另一个控制器调用存在于单独控制器中的 $scope 函数。下面的广播语句引发错误，我不确定为什么？“类型错误：无法读取 null 的属性‘$broadcast’”这是代码：控制器 1 :app.controller('FilterController', function ($scope, $filter, $uibModalInstance, errorService, dataService, values) {    $scope.sortByColumn = function () {      var data = { 'editorID': $scope.editorID(), 'filter':       dataService.data.objFilterColumns };      dataService.getData('UpdateFilter', data).then(function (response) {        $uibModalInstance.dismiss('cancel');        //I WANT TO CALL THE SCOPE 'reloadData' FUNCTION HERE        $scope.$emit('reloadData', data);        //this broadcast statement was already there but it throws error         $scope.$parent.$broadcast('sortbyColumn', $scope.userFilters, $scope.column.strColumnName, $scope.orderDir, dataService.data.objFilterColumns);    });  });控制器 2 : app.controller("myCtrl", ["$scope","$http","$uibModal","$log","$location","$window","dataService","errorService","lookupService", function ($scope, $http, $uibModal, $log, $location, $window, dataService, errorService, lookupService) {    $scope.loadPage = function (data, message, removeFilter, byColumn,  orderDir) {    //I want to call this function from the other controller   }  $scope.$on("reloadData", function () {     $scope.loadPage();  });  $scope.$on("sortbyColumn", function (event, filters, column, orderDir, filter) {    //some code  });}]);谢谢你的帮助

Answer 1

在 app.js 文件中为每个控制器定义全局 javascript 变量，类似于给定的。

var PayRateScope, ManageResourceScope, sequenceScopePA;

现在在您的控制器中，在 app.controller 方法定义的末尾，将 $scope 分配给相应的全局范围变量。例如。

// Payrare Controller

app.controller('PayRateAdminController', function ($scope, $compile, $http, $timeout) {

   // your code and functions

  PayRateScope = $scope;

});

//ManageResource Contoller

app.controller('ManageResourceController', function ($scope, $compile, $http, $timeout) {

   // your code and functions

  ManageResourceScope = $scope;

});

现在，您将能够在任何外部 js 中使用它的全局变量访问相应控制器内的函数，例如，

PayRateScope.FunctionName();

Answer 2

您可以使用服务：

app.service('someService', function () {

    this.loadPage = function (data, message, removeFilter, byColumn, orderDir) {

        //...

    };

});

并将其注入控制器：

控制器 1：

app.controller('FilterController',["$scope","someService" */andOther/*, function ($scope, someService) {

    $scope.sortByColumn = function () {

      var data = { 'editorID': $scope.editorID(), 'filter': 

      dataService.data.objFilterColumns };

      dataService.getData('UpdateFilter', data).then(function (response) {

        $uibModalInstance.dismiss('cancel');

       someService.loadPage(...parameters);

  });

控制器2：

 app.controller("myCtrl", ['$scope','someService' ,function($scope, someService){

    $scope.loadPage = someService.loadPage(data, message, removeFilter, byColumn, 

 orderDir);

}]);

来自 AngularJS 文档：

AngularJS 服务是使用依赖注入 (DI) 连接在一起的可替换对象。您可以使用服务在您的应用程序中组织和共享代码。

AngularJS 服务是：

延迟实例化——AngularJS 仅在应用程序组件依赖它时实例化服务。单例 - 依赖于服务的每个组件都获得对服务工厂生成的单个实例的引用。

Answer 3

首先，您需要了解 $broadcast()、$emit() 和 $on() 之间的区别

$broadcast() - 从父控制器向子控制器发送一个均匀的向下。

$emit() - 从当前控制器向上发送一个事件到它的所有父控制器

$on - $broadcast() 和 $emit() 引发的事件可以通过使用 $on() 连接事件处理程序来处理

$scope.$parent - 意味着您访问父控制器范围。这将帮助您访问父控制器中的变量和方法。

看起来像这样。

希望这会让您清楚这些条款。