javascript - 如何通过 Javascript 或 Jquery 从 Controller 外部调用 Angular JS 函数？

Question

我正在开发一个项目并使用 Jquery 和 AngularJS。 Jquery - 主要用于已经可用的插件。 Angular - 方便处理表单和对象以及 DOM 操作。

我有一个插件( https://github.com/VinceG/twitter-bootstrap-wizard )，其中定义了自定义事件，例如 onShow、onFinish、onNext 等。当用户执行某些操作时，会触发这些事件。

如何从这些函数之一调用 AngularJS 函数？

来自插件的代码

   $(document).ready(function() {
        $('#rootwizard').bootstrapWizard({
            tabClass: 'nav nav-pills',
            onNext: function(tab, navigation, index) {

               //I want to access the myFunction declared 
                //inside the AngularJS code and pass 'index' to it
            }
      });
    });

AngularJS 代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    $scope.myFunction = function(index) {
        // do something with index
    }
});

Answer 1

执行此操作的最简单方法是从某个元素检索 Controller 的范围，然后调用它的方法，如下所示:

var myScope = angular.element($('#someElement')).scope();
myScope.doSomething(); // make sure you also invoke the $scope.$apply() to start the digest process. 

但是，首先想一想，这是你真正想做的吗，我发现这种方式有点hacky，而且从长远来看，混合 jQuery 和 Angular 也不是一件好事......