Framework7内联页组件初始化不触发

Question

我正在使用Framework7框架。当尝试初始化组件时，比如日历或主页上的选择器，它们会工作并被解雇，但在内联页面中却不会。

当我说“页面”时，我说的是“视图”。

js文件：

var monthNames = ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט' , 'ספטמבר' , 'אוקטובר', 'נובמבר', 'דצמבר'];
    var dayNames = ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת'];
    var dateObj = new Date();
    var month = dateObj.getMonth(); //months from 1-12
    var day = dateObj.getDate()-1;
    var year = dateObj.getFullYear();
    myApp.calendar({
      input: '.date',
      closeOnSelect: true,
      disabled: {
        from: new Date(1000, 3, 1),
        to: new Date(year, month, day),
      },
      monthNames: monthNames,
      dayNamesShort: dayNames,
      firstDay: 0, // put sunday as first day
    });

上面的文件是由主页中的下一个html命令(mainview - index.html)触发的，而不是在内联视图中触发的，比如register.html：

<input type="text" id="date" ng-model="newRide.date" readonly class="date form_input ltr">

下面是主要的app.js文件：

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

};

var myApp = {};
var mainView = {};
var rightView = {};
var $$ = Dom7;

var app = angular.module("AngularApp", [])

app.run(function($rootScope, $window, $http, localStorageService) {

    $rootScope.siteName = "RIDE4YOU";
    $rootScope.clearDomain = "https://www.ride4you.co.il/";

    // define framework7
    myApp = new Framework7({
      modalTitle: "RIDE4YOU",
      modalButtonOk: "אוקיי",
      modalButtonCancel: "ביטול",
      material: false,
      angular:true,
      fastClicks: true,
      domCache: false,
      allowPageChange: false,
      pushState: true
    });

    mainView = myApp.addView('.view-main', {});

    $rootScope.go_back = function() {
      $window.history.back();
    };

    $$(document).on('page:init', function (e) {
      var page = e.detail.page;
      $rootScope.page = page;
      if (page.name!="index")
        $rootScope.stopTimer = true;
    });

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {

    }
 });

这就是我如何设置一个内联视图：

HTML文件：

<div data-page="newride" class="page no-toolbar no-navbar" ng-controller="newride">
  <div class="page-content">

   <div id="pages_maincontent">

   </div>

 </div>
</div>

谢谢。

Answer 1

日历和其他一些将不会从内联页面重新初始化。因此，您必须在app.js中对页面init进行初始化，或者使用jquery重新初始化日历。应用程序的最佳解决方案是在页面上重新初始化:init。

$$(document).on('click', 'classname',function (e) {
var month = dateObj.getMonth(); //months from 1-12
var day = dateObj.getDate()-1;
var year = dateObj.getFullYear();
var cal = myApp.calendar({
  input: '.date',
  closeOnSelect: true,
  disabled: {
    from: new Date(1000, 3, 1),
    to: new Date(year, month, day),
  },
  monthNames: monthNames,
  dayNamesShort: dayNames,
  firstDay: 0, // put sunday as first day
});
 cal.open();
});