Framework7内联页面组件初始化失效问题求助

你的问题核心很明确：日历初始化代码只在应用启动时执行了一次（首页加载阶段），但Framework7的内联页面是动态加载的，当你跳转到newride或register页面时，这些页面的DOM元素是在导航后才插入文档的，原初始化代码已经执行完毕，自然找不到目标元素绑定组件。下面是具体的解决步骤：

步骤1：把日历初始化逻辑封装为可复用函数 #

先把你的日历代码抽成独立函数，方便在需要的地方重复调用，同时加入销毁旧实例的逻辑避免冲突：

function initCalendar() {
  var monthNames = ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט' , 'ספטמבר' , 'אוקטובר', 'נובמבר', 'דצמבר']; 
  var dayNames = ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת']; 
  var dateObj = new Date(); 
  var month = dateObj.getMonth(); 
  var day = dateObj.getDate()-1; 
  var year = dateObj.getFullYear(); 

  // 先销毁已存在的日历实例，防止重复初始化导致异常
  if (myApp.calendar && typeof myApp.calendar.destroy === 'function') {
    myApp.calendar.destroy();
  }
  
  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, 
  });
}

步骤2：在页面初始化事件中触发组件初始化 #

你已经在app.js中监听了page:init事件，只需要在这个回调里加入日历初始化逻辑——因为内联页面加载完成后一定会触发这个事件：

修改你的page:init事件处理代码：

$$(document).on('page:init', function (e) {
  var page = e.detail.page;
  $rootScope.page = page;
  
  if (page.name!="index") {
    $rootScope.stopTimer = true;
  }
  
  // 关键：页面初始化完成后立即初始化日历
  // 如果你只有部分页面需要日历，可以加页面名称判断
  // if (['newride', 'register'].includes(page.name)) {
  //   initCalendar();
  // }
  // 所有有.date输入框的页面都初始化，直接调用：
  initCalendar();
});

步骤3：确保Angular编译完成后再执行初始化 #

因为你的内联页面使用了Angular的ng-controller和ng-model，必须等Angular完成页面编译渲染后，再初始化Framework7组件。可以把初始化逻辑放到Angular的$timeout回调里（对应你现有的compile函数）：

修改Framework7 Angular插件的compile函数：

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);
      // Angular编译完成后，再初始化日历组件
      initCalendar();
    });
  } catch (e) {
    // console.error("Some Error Occured While Compiling The Template", e);
  }
}

额外注意点 #

• 确认内联页面的输入框class="date"和日历配置的input: '.date'选择器完全匹配（你的代码已经符合要求）；
• 如果不同页面的日历配置不同，可以给输入框加专属class（比如date-newride），并在initCalendar中根据页面名称传入不同配置；
• 同理，Picker等其他组件也可以用相同的思路处理——封装初始化函数，在page:init事件中调用。

这样修改后，当你跳转到任意内联页面时，组件都会在页面加载完成、Angular渲染完毕后被正确初始化，就能正常触发了。

内容的提问来源于stack exchange，提问作者Raz