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

Question

我正在调试别人的软件。它使用 Angular 1.5.9，我对它不是很熟悉，也无法找到我问题的答案。

1. 我想从单独的 js 文件中的另一个控制器调用存在于单独控制器中的 $scope 函数。

2. 下面的广播语句引发错误，我不确定为什么？“类型错误：无法读取 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 Controllerapp.controller('PayRateAdminController', function ($scope, $compile, $http, $timeout) {   // your code and functions  PayRateScope = $scope;});//ManageResource Contollerapp.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 - 意味着您访问父控制器范围。这将帮助您访问父控制器中的变量和方法。看起来像这样。希望这会让您清楚这些条款。