Question

我使用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完成后才开始。

如果你想到另一个解决方案，我会很高兴听到这个。

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

现在在页面上你只需将其标记为＆＃34;缓存＆＃34;那样：

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

将打开关于＆＃39;的页面。在视图内。此代码允许在DOM上找到的顶部打开页面，而不是从另一个文件注入。非常适合角度使用，所以就像你知道角度想要装载的一切。现在你可以在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 app

时设置此插件

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

有关详细信息，请参阅下面的github repo以及完全正常工作的演示 https://github.com/ashvin777/framework7.angular

使用Framework7和AngularJS加载页面

3 个答案: