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

Posted 2023-02-22

技术标签:

【中文标题】如何从单独的 js 文件中调用角度 $scope 函数？ [复制]【英文标题】：How can I call an angular $scope function from a separate js file? [duplicate] 【发布时间】：2019-12-25 08:58:59 【问题描述】：

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

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

下面的广播语句抛出错误，我不确定为什么？ "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
  );
]);

感谢您的帮助

【问题讨论】：

【参考方案1】：

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();

【讨论】：

谢谢，它成功了，这似乎是最直接的方法【参考方案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 仅在应用程序组件依赖于它时实例化服务。单例 - 依赖于服务的每个组件都获得对服务工厂生成的单个实例的引用。

【讨论】：

【参考方案3】：

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

$broadcast() - 从父控制器向子控制器发送一个偶数向下。

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

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

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

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