使用Framework7和AngularJS加载页面

Load Pages with Framework7 and AngularJS

本文关键字：加载 AngularJS Framework7 使用      更新时间：2023-09-26

我使用phonegap+AngularJS+Framework7开发了手机应用程序。我的问题开始于框架7的交换页面。

当用户按下链接按钮时，Framework7会动态地将新的HTML页面注入DOM。因此，我必须使用$compile和$apply（）与angular一起重新编译注入的新html部分。

但在加载和编译的同时打开一个窗口却步履蹒跚。我的编译代码是：

//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完成后才能开始。

如果你考虑另一个解决方案，我会很高兴听到的。

我不确定它能对你有多大帮助，但也许它能给你正确的方向。我建议你使用ui路由器(https://github.com/angular-ui/ui-router)应用程序的框架。有了它，你就不需要进行这样的黑客攻击了。

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

我找到了解决方案。它非常简单，你所要做的就是将框架7配置为：

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

现在在页面上，你只需要像这样将其标记为"缓存"：

<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

您应该尝试编译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

相关文章：