Question

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

到目前为止，我们在加载所有内容时“引导”整个angularjs部分（两个控制器）：

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

使用骨干路由器的主要思想是通过URL获取参数传递，这是jQM提供的一个很大的改进。所以我还希望通过Backbone将参数传递给angularJS页面，这对DOM属性来说很容易。但是，我想在div活动时告诉div使用angularjs页面（然后准备好这些DOM属性）。

Answer 1

~~感谢JeanJaques的评论我终于找到了一个解决方案......我不知何故讨厌它，但它比以前更好：~~

所有“页面”都保留在index.html中，他们有ng-controller注释。

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

这样做的好处是，jQM在最初加载页面时会执行所有“增强”。对于jQM，没有任何变化。现在路由：

Backbone执行页面切换（对于angular和“plain JS pages”也是如此）：

/* 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）来“启用”正确的控制器（如果应该调用一个），这是非常重要的，当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路由器完成的。所有参数都由骨干路由器作为数据属性添加到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 router - 如何激活控制器？

1 个答案: