我正在使用Framework7框架。当尝试初始化组件时,如主页上的日历或选择器,它们可以工作并被解雇,但是在内联页面中没有。
当我说"页面"我正在谈论"观点"。
js file:
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
});
以上文件是由主页(mainview - index.html)中的下一个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>
感谢。
答案 0 :(得分: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();
});