从外部JavaScript函数访问AngularJS控制器方法

Question

从外部JavaScript函数访问AngularJS控制器方法

3

我想在外部JavaScript函数QCQAIssues()中访问GetQCQAData()函数。GetQCQAData()函数定义在ng-controller内部。我该怎么做？我尝试了很多方法来解决这个问题，但它们都无效。

function QCQAIssues() {
    $('#tblLegend').hide();
    createCookie("SelectTab", "QCQA");
    $('#tblQCQAIssue tr:gt(0)').remove();
}




var app = angular.module('myModule', []);
app.controller('QCQA', function ($scope, $http) {

    //$("[id$='ddlModuleBar']").append('<option  value=0>--------All--------</option>');
    //$("[id$='ddlSystemBar']").append('<option  value=0>--------All--------</option>');

    //GetSupportData();
    fetchSystemInformation();
    fetchModuleSelected();
    GetQCQAData();
    $scope.setSelected = function () {
        // console.log("show", arguments, this);
        if ($scope.lastSelected) {
            $scope.lastSelected.selected = '';
        }
        this.selected = 'rowSelect';
        $scope.lastSelected = this;
    }
    $scope.predicate = '-Date';

    //$scope.GetQCQAData=function(){


    function GetQCQAData() {
     blockUI();

     $http({
            method: 'Get',
            url: '/Home/GetQCQAData',
     }).success(function (data, status, headers, config) {
            $scope.QCQA = data.QCQAData;
            var fetchedQCQACountLen = data.QCQACount.length;


            if (fetchedQCQACountLen > 0) {

                $('#tblQCQAIssue tr:gt(0)').remove();
                $('#OpenKeyQ').removeClass('KeyOpen');
                $('#OpenKeyQ').addClass('KeyOpenIssue');
                $('#lblOpenCountQ').html("");
                $('#lblClosedCountQ').html("");
                $('#lblInProgressCountQ').html("");
                $('#lblOnHoldCountQ').html("");
                $('#lblInProgress3DaysCountQ').html("");
                var sv = getCookie('SelectTab');
                if (sv == 'Support') {
                    $('#tblLegendQcqa').hide();
                    $('#tblLegend').show();
                }
                else if (sv == 'QCQA') {
                    $('#tblLegendQcqa').show();
                    $('#tblLegend').hide();
                }




                for (var i = 0; i < fetchedQCQACountLen; i++) {

                    if (i == 0)
                        $('#lblOpenCountQ').html(' Open (' + data.QCQACount[i] + ')');
                    else if (i == 1)
                        $('#lblClosedCountQ').html(' Closed Today (' + data.QCQACount[i] + ')');
                    else if (i == 2)
                        $('#lblInProgressCountQ').html(' In Progress (' + data.QCQACount[i] + ')');
                    else if (i == 3)
                        $('#lblOnHoldCountQ').html(' On Hold (' + data.QCQACount[i] + ')');
                    else if (i == 4)
                        $('#lblInProgress3DaysCountQ').html(' Inactive for more than 3 working days (' + data.QCQACount[i] + ')');
                }

            }
            enablePinning: true;
            unblockUI();
            //$("[id$='ddlModuleBar']").append('<option  value=0>--------All--------</option>');
        }).error(function (data, status, headers, config) {
            unblockUI();
            $scope.message = 'Unexpected Error';
        });

 }

- Awais Alvi

如果将函数引用附加到作用域上，那么您可以使用angular.element(elementthathasthescope).scope().GetQCQAData()并跟随作用域应用来访问该作用域。 - PSL

PSL，你能告诉我在我的情况下语法是什么吗？我该如何附加引用以及在哪里附加？ - Awais Alvi

控制器是否附加到您的HTML元素上？ - PSL

可重用的函数应通过服务共享。在这种情况下，$injector会对您有所帮助。 - bhantol

PSL，是的，确切地说它附加在HTML中的一个div上。 - Awais Alvi

PSL控制器附加到我的HTML中的一个div上...实际上我正在使用选项卡JavaScript库。在单击第一个选项卡时，我想调用附加到第一个div的第一个控制器的方法...在单击第二个选项卡时，我想调用第二个控制器的方法，第二个控制器附加到第二个div上。 - Awais Alvi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bhantol · Answer 1

你可以用不同的方式来实现这个目标：-

- 将可重用函数制作成服务

app.service('GetQCQAData' ,function() {
  //your code here
});

然后在你的外部函数中

function QCQAIssues() {
     var $injector = angular.injector();
     var GetQCQADataFn = $injector.get('GetQCQAData');
 //your code here
}

结账

AngularJS $injector 文档

已更新 - （添加了一种方法）

**原型方式** 这不是首选，因为您无法保证在 QAQAIssues() 调用之前是否执行了控制器（调用与定义-定义是可以的）

您的外部函数

function QCQAIssues() {
  this.GetQCQADate();
  //this will be enhanced later 
  //you must be absolutely sure that QCQAIssues 
  //are called after the controller does its thing
}

在你的控制器中

app.controller('QCQA', function ($scope, $http) {
   var GetQCQAData = function () {
     ///your code
   };

    $scope.GetQCQAData = GetQCQAData;

    QCQAIssues.prototype.method = GetQCQAData;// 
}

一般来说，我建议您不要混合使用不同的命名空间，并建议您找到一种方法将外部函数封装在AngularJS内部。请注意QAQCIssues位于顶层窗口对象上。