javascript - 如何从 Backbone Controller 执行 angularJS Controller 中的函数

Question

我正在开发一个最初使用 backbone 和 jQuery 创建的应用程序，但是由于客户要求，新模块是使用 angular 构建的。应用程序的路由是通过主干路由处理的，我们已经成功地集成了 Angular 模块。

实际的问题是，我需要以 Angular 检索模块的当前实例，并根据主干 Controller 处理的操作从该模块的 Controller 执行函数。

这是我的 Angular 模块和 Controller 的样子:

//In chat.module.js
( function () {
angular
    .module( 'chat.module', [] );
})();

//In chat.controller.js
(function () {
angular
        .module('chat.module')
        .controller('chat.controller', ['profileFactory', '$filter', '$q', '$timeout', 'Position', 'Chat', chat]);

function chat(profileFactory, $filter,  $q, $timeout, Position, Chat) {
    var vm = this;
    vm.initChatFlag = false;

    vm.initChat = initChat;
    vm.setInformation = setInformation;


    function setInformation() {
        //handle business logic here
    }

    ...

在backbone中，模块创建如下:

        chatmodule: function () {
        var self = this;
        var element = angular.element(document.querySelector('#modalCallback'));
        var chat = angular.element(document.querySelector('#chatModule'));
        var isInitializedChat = chat.injector();

        var isInitialized = element.injector();
        if (!isInitialized) {
            angular.bootstrap($('#modalCallback'), ['app']);
        }
        if (!isInitializedChat) {
            angular.bootstrap($('#chatModule'), ['app']);
        }

        //TODO: chat.controller.setInformation() get access to fields like chat.controller.initChatFlag etc

主应用模块是这样定义的:

    (function(){
    angular
        .module('app',[
            'callback',
            'ui.bootstrap',
            '720kb.datepicker',
            'ngLocale',
            'directives.module',
            'interceptor',
            'directive.loading',
            'angularUtils.directives.dirPagination',
            'blog.module',
            'profile.module',
            'filters.module',
            'chat.module',
            'ui.toggle',
        ]);
})();

Answer 1

AngularJS $injector 是很多魔法发生的地方，所以如果你在 AngularJS 代码之外公开它，你可以将它连接到非 AngularJS 代码，如下所示:

//A simple AngularJS service:
app.service('myService', function() {
  this.message = "This is my default message.";
});

//Expose the injector outside the angular app.
app.run(function($injector, $window) {
  $window.angularInjector = $injector;
});

//Then use the injector to get access to the service.
//Make sure to wrap the code in a `$apply()` so an 
//AngularJS digest cycle will run
function nonAngularEventHandler() {
  angularInjector.invoke(function(myService, $rootScope) {    
    $rootScope.$apply(function() {
      myService.message = "Now this is my message."
    });
  });
}

编辑:或者，像这样简化调用。

//Instead of exposing the $injector directly, wrap it in a function
//which will do the $apply() for you.
app.run(function($injector, $window, $rootScope) {

  $window.callInMyAngularApp = function(func) {
    $rootScope.$apply(function() {
      $injector.invoke(func);
    });
  }

});

//Then call that function with an injectable function like so.
function nonAngularClick() {
  callInMyAngularApp(function(myService) {    
      myService.message = "Now this is my message."
  });
}

//And remember if you're minifying, you'll want the minify-safe
//version of the injectable function like this
function nonAngularClick() {
  callInMyAngularApp(['myService', function(myService) {    
      myService.message = "Now this is my message."
  }]);
}

更新:(我保证是最后一个!)上面的方法可以正常工作，但您可能需要考虑公开定义良好的 API 而不是通用的可注入(inject)接口(interface)。请考虑以下事项。

//Now I have a limited API defined in a service
app.service("myExternalApi", function($rootScope, myService) {
  this.changeMyMessage = function(message) {
    $rootScope.$apply(function() {
      myService.message = message;
    });
  };
});

//And I just expose that API
app.run(function($window, myExternalApi) {
  $window.myExternalApi = myExternalApi;
});

//And the call from outside of angular is much cleaner.
function nonAngularClick() {
  myExternalApi.changeMyMessage("Now this is my message.");
}