如何从单独的 js 文件中调用角度 $scope 函数？ [复制]

Question

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

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

2. 下面的广播语句抛出错误，我不确定为什么？ "TypeError: 无法读取属性 '$broadcast' of null"

代码如下：

控制器 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

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

var PayRateScope, ManageResourceScope, sequenceScopePA;

1. 现在在您的控制器中，在 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;
});

1. 现在您将能够在任何外部 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 - 表示您访问父控制器范围。这将帮助您访问父控制器中的变量和方法。

看起来像这样。 希望这能让您清楚地了解这些条款。