在按钮单击时使用 jquery 调用角度方法

Posted 2023-05-09

【中文标题】在按钮单击时使用 jquery 调用角度方法

【英文标题】：Calling angular method using jquery on button click

【发布时间】：2021-01-03 05:59:42

【问题描述】：

我想使用 jquery 按钮单击从角度控制器调用方法。

这是我的 html

<div class="actionBar">
    <select class="select select-primary form-control" id="ClassificationStepTechnical" required>
        <option value="">...</option>
        <option value="1">yes</option>
        <option value="2">no</option>
   </select>
   <input type="button" value="start" class="btn btn-primary" onclick="StartRequestStep()" />
</div>

<div id="StartRequest" ng-app="complaintRequest" ng-controller="CompalintController"></div>

我的 jquery 函数：

function StartRequestStep() 
     if ($("#ClassificationStepTechnical").val() == "1") 
         angular.element($("#StartRequest")).vm().createComplaint();
         

我的 Angular 控制器：

(function()
    "use strict";

    angular.module("complaintRequest").controller("CompalintController", ["$state",CompalintController]);

    function CompalintController($state)
    
        var vm = this;
        vm.createComplaint = function () 

            var stepToGo = 'Request.StartRequest'
            $state.go(stepToGo,  requestId: -1 );
        

        vm.loginComplaint = function () 
            var stepToGo = 'Login.Authentication'
            $state.go(stepToGo,null);
        

        vm.ClassificationRequest = function () 
            var stepToGo = 'Classification.ClassificationRequest'
            $state.go(stepToGo, null);
        
    
())

我想在按钮单击时调用 vm.createComplaint，但出现此错误

Uncaught TypeError: angular.element(...).vm is not a function

【问题讨论】：

忽略以下所有答案并立即停止使用 Angular 和 jQuery。切勿将它们一起使用。它们是两个完全不同的框架，一个操作 DOM，另一个动态地重新生成相同的 DOM。他们不知道彼此的存在和行动。您的应用程序必然充满了黑客和变通方法，混乱且难以维护，更不用说您必须加载两个库而不是一个。话虽这么说，做你想做的事。

我可以解释为什么您会收到该错误消息。我可以告诉你如何解决它。但不值得写答案，因为您的应用程序结构如此糟糕。该应用程序使用 jQuery 调用 AngularJS 控制器中的方法，然后该控制器调用 jQuery 函数。这是一个难以理解、测试、调试和维护的结构。

感谢您的评论，我没有任何角度经验，但您的评论确实帮助我忽略了这种方式的实现。

【参考方案1】：

var module = angular.module("complaintRequest", []);
module.controller("CompalintController", ["$scope", function($scope)
   $scope.createComplaint = function () 
    var stepToGo = 'Request.StartRequest'
    $scope.go(stepToGo,  requestId: -1 );
  

  $scope.loginComplaint = function () 
    var stepToGo = 'Login.Authentication'
    $scope.go(stepToGo,null);
  

  $scope.ClassificationRequest = function () 
    var stepToGo = 'Classification.ClassificationRequest'
    $scope.go(stepToGo, null);
  
]);

function StartRequestStep() 
     if ($("#ClassificationStepTechnical").val() == "1") 
        angular.element($("#StartRequest")[0]).scope().createComplaint();
        

这应该可行。顺便说一句，我看不到您的 go 功能在哪里。

【讨论】：

人们，不要再试图让 Angular 和 jQuery 一起工作了。他们只是没有。

请记住，angular.element().scope() 方法需要启用 Debug Data mode。使用该模式会导致性能显着下降。