2

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

当用户按下链接按钮时，Framework7 会动态地向 DOM 注入新的 HTML 页面。因此，我必须使用带有角度的 $compile 和 $apply() 来重新编译注入的新 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()？如果我必须使用承诺来确保新页面的动画只会在完成$compile之后开始$apply。

如果您考虑另一种解决方案，我将很高兴听到。

4

3 回答 3

1

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

于 2016-07-13T08:59:01.737 回答
1

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

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'});

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

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

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

于 2016-03-25T15:05:49.343 回答
1

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

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

于 2016-03-25T12:14:32.297 回答