Загрузите страницы с Framework7 и AngularJS

Question

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

Framework7 вводит новую HTML-страницу в DOM динамически, когда пользователь нажимает кнопку ссылки. следовательно, я должен использовать $ 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

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

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

EDIT: Docs: http://framework7.io/docs/pages-inline.html

Answer 2

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

Единственное, что она может быть сложной задачей, чтобы интегрировать его с Framework 7. Несмотря на то, что некоторые люди успешно с ним https://github.com/nolimits4web/Framework7/issues/35

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