Загружайте страницы с помощью Framework7 и AngularJS

Я разработал телефонное приложение, используя phonegap + AngularJS + Framework7. Моя проблема начинается со страниц подкачки framework7.

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() синхронизируются? если мне нужно использовать обещание, чтобы убедиться, что анимация новой страницы начнется только после того, как $compile и $apply будут выполнены.

если вы думаете о другом решении, я буду рад это услышать.


cordova javascript angularjs html-framework-7
person Yana Tovpienetz    schedule 25.03.2016    source источник
comment
Я предлагаю вам проверить некоторые стартовые пакеты, возможно, даже проект ionic.io. Проекты на основе Angular1 и Angular2.   -  person Mathijs Segers    schedule 25.03.2016

Ответы (3)


arrow_upward
1
arrow_downward

Я не уверен, что это может помочь вам очень много, но, возможно, это может дать вам правильное направление. Я предлагаю вам использовать ui-router (https://github.com/angular-ui/ui-router) для вашего приложения. С ним вам не нужно будет выполнять такие хаки.

Единственное, может быть сложно интегрировать его с Framework 7. Хотя некоторым это удалось https://github.com/nolimits4web/Framework7/issues/35

person Evgeny Sorokin    schedule 25.03.2016

arrow_upward
1
arrow_downward

Я нашел решение. Это очень просто, все, что вам нужно сделать, это просто настроить 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 без повторной компиляции страницы (повторная компиляция слишком сложна на телефонах).

Я надеюсь, что это поможет кому-то еще.

EDIT: Документы: http://framework7.io/docs/pages-inline.html

person Yana Tovpienetz    schedule 25.03.2016

arrow_upward
1
arrow_downward

Вы должны попытаться скомпилировать представления для события 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 ниже с полностью работающими демонстрациями https://github.com/ashvin777/framework7.angular

person Ashvin777    schedule 13.07.2016