有没有办法在 AngularJS 之外重新定义绑定到 $ctrl 的函数？

Posted 2023-05-09

【中文标题】有没有办法在 AngularJS 之外重新定义绑定到 $ctrl 的函数？

【英文标题】：Is there a way to re-define a function bound to $ctrl outside of AngularJS?

【发布时间】：2020-05-01 09:05:34

【问题描述】：

在我的 DOM 中，我有一个包含 ng-click="$ctrl.goToHome() 的元素，它绑定到我网站的徽标。该元素是由使用 AngularJS 制作的第三方应用程序创建的。请参阅下面的完整元素：

<img ng-if="::!$ctrl.config.url" ng-click="$ctrl.goToHome()" class="ct-logo" ng-src="https://www.example.com/wp-content/themes/mytheme/logo.png"  src="https://www.example.com/wp-content/themes/mytheme/logo.png">

但是，此功能无法正常工作可能是因为未定义该功能。我不确定在哪里定义它。有没有办法重新定义 goToHome() 函数？换句话说，是否可以使用 jQuery 或 JS 重新绑定函数？如果是这样，最简单的方法是什么？

【参考方案1】：

所以基本上，$ctrl 是它自己的作用域，有点像它自己的世界，其中定义的每个方法都不存在于外部，看起来你正在尝试在$ctrl 作用域之外使用$ctrl.goToHome() .

如果您希望goToHome() 方法在$ctrl 范围之外可用。

你可以做两个中的任何一个

您可以将goToHome() 方法提取到一个工厂，然后在您想使用它的任何范围内调用它。这样goToHome() 总是做一件事。

const app = angular.module("app", []);

const goToHomeHandler = function() 
    return 
        goToHome: function() 
            alert('go Home');
        
    ;
;

app.factory('goToHomeHandler', goToHomeHandler);

app.controller("personController", function($scope, goToHomeHandler) 
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.goToHome = function () 
        goToHomeHandler.goToHome();
    
);

app.controller("personController2", function($scope, goToHomeHandler) 
    $scope.firstName = "Second John";
    $scope.lastName = "Second Doe";
    $scope.goToHome = function () 
        goToHomeHandler.goToHome();
    
);

另一种可能不是最好的选择是在 $windows 范围内定义 goToHome() 方法，这样它就可以在任何地方访问。

我在下面添加了一个小例子

如您所见，即使test() 方法是在personController 中创建的，但只要通过$windows 范围访问它，它就可以在personController2 中使用

    const app = angular.module("app", []);
    app.controller("personController", function($scope, $window) 
    $window.goToHome = function() 
      alert('yoyo');
    
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.goToHome = function () 
        $window.goToHome();
    
);

app.controller("personController2", function($scope, $window) 
    $scope.firstName = "Second John";
    $scope.lastName = "Second Doe";
    $scope.goToHome = function () 
        $window.goToHome();
    
);

【讨论】：

感谢您的回答。正如我所提到的，我自己并没有应用 Angular，它来自第三方应用程序模块。所以基本上，我应该安装 AngularJS 并尝试重新定义它？我应该使用哪个版本的 AngularJS？

如果你的代码中有ng-click，那么你的代码库中已经有AngularJS了。如果你不能弄清楚，你可以创建一个新的 JS 方法，它与$ctrl.goToHome()

具有相同的功能