angularjs 1.6 with backbone 路由器 - 如何激活控制器？

Question

我们有一个带有 backbone 路由器和 jQueryMobile 的单页应用程序，设置非常简单。现在该应用程序中有两个带有 angularjs 的页面。但是，因为到目前为止我们还没有使用 angularjs 路由器，所以两个控制器都会在页面加载时立即启动（尽管没有人希望它们在此时处于活动状态）。如何预防？

到目前为止，我们 "bootstrap" 整个 angularjs 部分（两个控制器）都已加载：

var checkinApp = angular.module('checkinApp', ['ngGeolocation']);

使用 backbone 路由器背后的主要思想是通过 URL 获取参数传递，这是对 jQM 提供的功能的重大改进。因此，我还想通过 Backbone 将参数传递给 angularJS 页面，使用 DOM 属性可以轻松实现。但是，我想用 angularjs 页面告诉 div 何时处于活动状态（然后准备好这些 DOM 属性）。

Answer 1

~~感谢 JeanJaques 的评论，我终于找到了解决方案...我有点讨厌它，但它比我以前的要好得多：~~

所有 "pages" 留在 index.html，他们有他们的 ng-controllers 注释。

一个元素被添加到 index.html（但永远不会被使用）。

这样做的好处是 jQM 会在最初加载页面时完成所有 "enhancing"。对于 jQM 没有任何改变。现在路由：

Backbone 进行页面切换（angular 和“纯 JS 页面相同”）：

/* global Backbone, ContactsApp */ // Extends Backbone.Router var ContactsRouter = Backbone.Router.extend({ // The Router constructor initialize: function () { // Tells Backbone to start watching for hashchange events Backbone.history.start(); }, // Backbone.js Routes routes: { "!/checkin_meeting_overview": "checkin_meeting_overview" }, checkin_meeting_overview: function () { $("body").pagecontainer("change", "#checkin_meeting_overview", {reverse: false, changeHash: false}); }, });

我还 ui.router 配置（不知道为什么我最初尝试 ngRouter） "enable" 如果应该调用正确的控制器，这很重要，一个否则当 angularjs 未激活时执行的状态：

checkinApp.config(function ($stateProvider) { var checkin_meeting_overview = { name: 'checkin_meeting_overview', url: '/checkin_meeting_overview', controller: 'meetingOverviewController', template: ' ', onEnter: function () { alert("IMPORTANT Entering checkin_meeting_overview: "); } }; $stateProvider.state(checkin_meeting_overview); $stateProvider.state("otherwise", { url: "*path", template: " ", onEnter: function () { // alert("IMPORTANT Unhandled AngularJS state "); } }); });

~~到目前为止这似乎有效...再次感谢 JeanJaques！~~

我最终加载了整个块，包括 ng-controller="..." 定义并将其插入 dom，然后执行了控制器。这是由 Backbone 路由器完成的。 backbone 路由器将所有参数作为数据属性添加到 DOM 中，并从 DOM（在控制器中）加载到 angularjs 中。

这是加载 angularjs 页面之一的路由器代码：

    checkin_add_meeting: function (contact_id) {
        // alert("Navigating to checkin_add_meeting with contact_id=" + contact_id + " => ANGULARJS!");

        var templateUrl = "js/pages/checkin/checkin_edit.html";
        var pageSelector = "#checkin_add_meeting";

        // Remove old page
        if ($(pageSelector).length > 0) {
            $(pageSelector).remove();
        }

        $.mobile.loadPage(templateUrl, {type: "get"}).done(function (e, ui, page) {
            // Hand over parameters
            $(pageSelector).data("contact_id", contact_id);
            $(pageSelector).data("talk_id", undefined);

            // Change pagecontainer
            $("body").pagecontainer("change", pageSelector, {reverse: false, changeHash: false});

            // Bootstrap angularjs
            angular.bootstrap(document.getElementById("checkin_add_meeting"), ['checkinApp']);
        }).fail(function () {
            error("ERROR: Failed loading page " + pageSelector);
        });
    },

angularjs 1.6 with backbone 路由器 - 如何激活控制器？

angularjs 1.6 with backbone router - how to activate a controller?

javascript

jquery-mobile

backbone.js

angularjs