使用 Framework7 和 AngularJS 加载页面

Question

我使用 phonegap + AngularJS + Framework7 开发了 phone 应用程序。我的问题从 framework7 的交换页面开始。

当用户按下 link 按钮时，

Framework7 将新的 HTML 页面动态注入到 DOM。因此，我必须使用带有 angular 的 $compile 和 $apply() 来重新编译注入的新 html 部分。

但是打开一个 window 动画是步履蹒跚的，同时加载和编译。我的编译代码是：

//listiner for new page injection to DOM.
$$(document).on('pageInit', function (e) {
    //on page init , compile the new DOM ijected.
    $compile(angular.element(document.getElementsByClassName(e.detail.page.container.className)).contents())($scope);
    $scope.$apply();
});

还有一个名为 "beforeAnimation" 的事件。我想也许在动画之前编译所有内容，同时向用户展示一个加载微调器，当页面准备好时，我想启动动画并向他展示页面。但我不确定如何实施此解决方案，$compile 和 $apply() 是否同步？如果我必须使用 promise 来确保新页面的动画仅在 $compile 和 $apply 完成后才开始。

如果您考虑其他解决方案，我会很高兴听到。

Answer 1

我不确定它能否对您有很大帮助，但也许它可以为您指明正确的方向。我建议您为您的应用程序使用 ui-router (https://github.com/angular-ui/ui-router) 框架。有了它，您将不需要执行此类黑客操作。

唯一的问题是，将其与 Framework 7 集成可能具有挑战性。尽管有些人成功了 https://github.com/nolimits4web/Framework7/issues/35

Answer 2

我找到了解决方案。非常简单，您只需将 framework7 配置为：

var myApp = new Framework7({
    domCache: true
});

现在在页面上，您只需将其标记为 "cached" 即可：

<div class="page cached" data-page="about">
    <div class="page-content">
      <p>About page</p>
    </div>
</div>

要打开您只需要使用 javascript 代码的页面：

var mainView = myApp.addView('.view-main')          

// Load about page:
mainView.router.load({pageName: 'about'});

它将在视图中打开页面 'about'。此代码允许已在 DOM 上找到的顶部打开页面，而不是从另一个文件注入。非常适合与 angular 一起使用，所以你知道 angular 想要加载所有内容。现在您可以在 framework7 中的页面上使用指令控制器等，而无需重新编译页面（重新编译在手机上过于庞大）。

我希望这会对其他人有所帮助。

编辑： 文档：http://framework7.io/docs/pages-inline.html

Answer 3

您应该尝试在 pageinit 事件上编译视图。试试这个

Framework7.prototype.plugins.angular = function(app, params) {
    function compile(newPage) {
        try {
            var $page = $(newPage);
            var injector = angular.element("[ng-app]").injector();
            var $compile = injector.get("$compile");
            var $timeout = injector.get("$timeout");
            var $scope = injector.get("$rootScope");
            $scope = $scope.$$childHead;
            $timeout(function() {
                $compile($page)($scope);
            })
        } catch (e) {
            //console.error("Some Error Occured While Compiling The Template", e);
        }
    }

    return {
        hooks: {
            pageInit: function(pageData) {
                compile(pageData.container);
            }
        }
    }

};

并在 framework7 应用程序初始化时设置此插件

new Framework7({
  ....
  angular : true
  ....
})

有关详细信息，您可以参考下面的 github 具有完整工作演示的 repo https://github.com/ashvin777/framework7.angular

使用 Framework7 和 AngularJS 加载页面

Load Pages with Framework7 and AngularJS

javascript

angularjs

cordova

html-framework-7