angular.js - angular字符串拼接点击事件没反应
本文介绍了angular.js - angular字符串拼接点击事件没反应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是最终要实现的效果
在angular控制器里面写的字符串拼接，用ng-click去调方法，但是点击事件不生效，如果换成onclick，会报错，不认识写的方法，求解？？？？
(function() {
'use strict';
angular
.module('vipservice')
.controller('calendarController', calendarController);
/**
* @ngInject
*/
function calendarController($scope, $translate, $cookieStore, $interval, $state, $interpolate,$compile,
getProfile, getOwnerTask, getOwnerTaskTimes) {
var lang = $cookieStore.get('lang');
if (!lang) {
$cookieStore.put('lang', 'cn');
$scope.btnText = '英文';
}
$scope.btnText = lang === 'cn' ? '英文' : '中文';
$scope.switching = function() {
lang = lang === 'cn' ? 'en' : 'cn';
$scope.btnText = lang === 'cn' ? '英文' : '中文';
$cookieStore.put('lang', lang);
$translate.use(lang);
window.localStorage.lang = lang;
window.location.reload();
};
$scope.cur_lang = $translate.use();
getProfile.postData({}).then(function(result) {
$scope.UserID = result.Profile.UserID;
//获取任务列表
getOwnerTask.postData({
OwnerId: $scope.UserID,
Status: [0]
}).then(function(result) {
$scope.task = result;
console.log($scope.task)
});
//获取任务日期列表
getOwnerTaskTimes.postData({
OwnerId: $scope.UserID,
Begin: '1990-01-31T16:00:00.740Z',
End: '2400-01-31T16:00:00.740Z'
}).then(function(result) {
$scope.times = result;
console.log($scope.times)
})
});
//判断闰年
function runNian(_year) {
if (_year % 400 === 0 || (_year % 4 === 0 && _year % 100 !== 0)) {
return true;
} else {
return false;
}
}
//判断某年某月的1号是星期几
function getFirstDay(_year, _month) {
var allDay = 0,
y = _year - 1,
i = 1;
allDay = y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) + 1;
for (; i < _month; i++) {
switch (i) {
case 1:
allDay += 31;
break;
case 2:
if (runNian(_year)) {
allDay += 29;
} else {
allDay += 28;
}
break;
case 3:
allDay += 31;
break;
case 4:
allDay += 30;
break;
case 5:
allDay += 31;
break;
case 6:
allDay += 30;
break;
case 7:
allDay += 31;
break;
case 8:
allDay += 31;
break;
case 9:
allDay += 30;
break;
case 10:
allDay += 31;
break;
case 11:
allDay += 30;
break;
case 12:
allDay += 31;
break;
}
}
return allDay % 7;
}
function showCalendar(_year, _month, _day, firstDay) {
var i = 0,
monthDay = 0,
showStr = "",
_classname = "",
today = new Date();
//月份的天数
switch (_month) {
case 1:
monthDay = 31;
break;
case 2:
if (runNian(_year)) {
monthDay = 29;
} else {
monthDay = 28;
}
break;
case 3:
monthDay = 31;
break;
case 4:
monthDay = 30;
break;
case 5:
monthDay = 31;
break;
case 6:
monthDay = 30;
break;
case 7:
monthDay = 31;
break;
case 8:
monthDay = 31;
break;
case 9:
monthDay = 30;
break;
case 10:
monthDay = 31;
break;
case 11:
monthDay = 30;
break;
case 12:
monthDay = 31;
break;
}
//输出日历表格，这部分因结构而异
showStr = "<table class='cld-w'><thead>";
//日历头部
showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre' ng-click='preMonth(_year, _month, _day)'>" +
'<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_nianfenqiehuanzuo"></use></svg>' +
"</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>" + _year + "年" + _month + "月" + _day + "日" +
'</em><span class=cld-next" ng-click="preMonth(_year, _month, _day)">'+
'<svg class="icon" aria-hidden="true" ><use xlink:href="#icon-icon_nianfenqiehuanyou"></use></svg>' +
"</span></div></th></tr>";
//日历星期
showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
showStr += "</thead><tbody><tr>";
//当月第一天前的空格
for (i = 1; i <= firstDay; i++) {
showStr += "<td><div></div></td>";
}
//显示当前月的天数
for (i = 1; i <= monthDay; i++) {
//当日的日期
if (_year === today.getFullYear() && _month === today.getMonth() + 1 && i === today.getDate()) {
_classname = "cld-cur";
}
//当日之前的日期（这个判断是因为我有工作需求，就是要求之前的日期不能点击）
else if (_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth() + 1 && i < today.getDate())) {
_classname = "cld-old";
}
//其他普通的日期
else {
_classname = "cld-day";
}
//其他大于当月的月份的相同日期（为了让点击下一月的时候，相同的日期增加cld-cur类）
if (_day === i && (_year > today.getFullYear() || _month > today.getMonth() + 1)) {
_classname = "cld-cur";
}
//把日期存在对应的value
showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'><div>" + i + "</div></td>";
firstDay = (firstDay + 1) % 7;
if (firstDay === 0 && i !== monthDay) {
showStr += "</tr><tr>";
}
}
//剩余的空格
if (firstDay !== 0) {
for (i = firstDay; i < 7; i++) {
showStr += "<td><div></div></td>";
}
}
showStr += "</tr></tbody></table>";
//插入calendar的页面结构里
var html= $compile(showStr)($scope)
calendar.innerHTML = html;
//上一月
function preMonth(_year, _month, _day) {
if (_month == 1) {
showDate(_year - 1, 12, _day);
} else {
showDate(_year, _month - 1, _day);
}
}
//下一月
function nextMonth(_year, _month, _day) {
if (_month == 12) {
showDate(_year + 1, 1, _day);
} else {
showDate(_year, _month + 1, _day);
}
}
}
//显示年月日
function showDate(_year, _month, _day) {
var date = "",
firstDay = getFirstDay(_year, _month, _day);
if (_day !== 0) {
date = _year + "年" + _month + "月" + _day + "日";
} else {
date = "No Choose.";
}
document.getElementById("showDate").innerHTML = date; //日历头部显示
showCalendar(_year, _month, _day, firstDay); //调用日历显示函数
}
//初始化
var calendar = document.createElement('div');
calendar.setAttribute('id', 'showCld');
document.getElementById("calendar-box").appendChild(calendar); //增加到你的box里
//获取当天的年月日
var today = new Date();
var _year = today.getFullYear(),
_month = today.getMonth() + 1,
_day = today.getDate();
var firstDay = getFirstDay(_year, _month);
//显示日历
showCalendar(_year, _month, _day, firstDay);
}
})();
这个报错是写成onclick的时候
(function() {
'use strict';
angular
.module('vipservice')
.controller('calendarController', calendarController);
/**
* @ngInject
*/
function calendarController($scope, $translate, $cookieStore, $interval, $state, $interpolate,$compile,
getProfile, getOwnerTask, getCalTaskTimes,parse) {
var lang = $cookieStore.get('lang');
if (!lang) {
$cookieStore.put('lang', 'cn');
$scope.btnText = '英文';
}
$scope.btnText = lang === 'cn' ? '英文' : '中文';
$scope.switching = function() {
lang = lang === 'cn' ? 'en' : 'cn';
$scope.btnText = lang === 'cn' ? '英文' : '中文';
$cookieStore.put('lang', lang);
$translate.use(lang);
window.localStorage.lang = lang;
window.location.reload();
};
$scope.cur_lang = $translate.use();
// parse.postData({
// PARSE_APP_ID:'tn9A5W25oq9YVgP2LfcbedPT3ydDubtOMoqjL6ib',
// PARSE_CLIENT_KEY:'HGTII74PxrdSDRrTAQv6SalXd7W4yziSCGMU1rim'
// }).then(function(result) {
// debugger
// console.log(result)
// });
//判断闰年
function runNian(_year) {
if (_year % 400 === 0 || (_year % 4 === 0 && _year % 100 !== 0)) {
return true;
} else {
return false;
}
}
//判断某年某月的1号是星期几
function getFirstDay(_year, _month) {
var allDay = 0,
y = _year - 1,
i = 1;
allDay = y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) + 1;
for (; i < _month; i++) {
switch (i) {
case 1:
allDay += 31;
break;
case 2:
if (runNian(_year)) {
allDay += 29;
} else {
allDay += 28;
}
break;
case 3:
allDay += 31;
break;
case 4:
allDay += 30;
break;
case 5:
allDay += 31;
break;
case 6:
allDay += 30;
break;
case 7:
allDay += 31;
break;
case 8:
allDay += 31;
break;
case 9:
allDay += 30;
break;
case 10:
allDay += 31;
break;
case 11:
allDay += 30;
break;
case 12:
allDay += 31;
break;
}
}
return allDay % 7;
}
function showCalendar(_year, _month, _day, firstDay) {
var i = 0,
monthDay = 0,
showStr = "",
_classname = "",
today = new Date();
//月份的天数
switch (_month) {
case 1:
monthDay = 31;
break;
case 2:
if (runNian(_year)) {
monthDay = 29;
} else {
monthDay = 28;
}
break;
case 3:
monthDay = 31;
break;
case 4:
monthDay = 30;
break;
case 5:
monthDay = 31;
break;
case 6:
monthDay = 30;
break;
case 7:
monthDay = 31;
break;
case 8:
monthDay = 31;
break;
case 9:
monthDay = 30;
break;
case 10:
monthDay = 31;
break;
case 11:
monthDay = 30;
break;
case 12:
monthDay = 31;
break;
}
$('#calendar-box').find('table').remove();
//输出日历表格，这部分因结构而异
var showStr;
$scope.year,$scope.month,$scope.day;
showStr = "<table class='cld-w'><thead>";
//日历头部
showStr +="<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre' ng-click='preMonth()'>" +
'<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_nianfenqiehuanzuo"></use></svg>' +
"</span><em id='showDate' value='" + $scope.year + "-" + $scope.month + "-" + $scope.day + "'>" + _year + "年" + _month + "月" + _day + "日" +
'</em><span class=cld-next" ng-click="nextMonth()">'+
'<svg class="icon" aria-hidden="true" ><use xlink:href="#icon-icon_nianfenqiehuanyou"></use></svg>' +
"</span></div></th></tr>";
//日历星期
showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
showStr += "</thead><tbody><tr>";
//当月第一天前的空格
for (i = 1; i <= firstDay; i++) {
showStr += "<td><div></div></td>";
}
//显示当前月的天数
for (i = 1; i <= monthDay; i++) {
//当日的日期
if (_year === today.getFullYear() && _month === today.getMonth() + 1 && i === today.getDate()) {
_classname = "cld-cur";
}
//当日之前的日期（这个判断是因为我有工作需求，就是要求之前的日期不能点击）
else if (_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth() + 1 && i < today.getDate())) {
_classname = "cld-old";
}
//其他普通的日期
else {
_classname = "cld-day";
}
//其他大于当月的月份的相同日期（为了让点击下一月的时候，相同的日期增加cld-cur类）
if (_day === i && (_year > today.getFullYear() || _month > today.getMonth() + 1)) {
_classname = "cld-cur";
}
//把日期存在对应的value
showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'><div>" + i + "</div></td>";
firstDay = (firstDay + 1) % 7;
if (firstDay === 0 && i !== monthDay) {
showStr += "</tr><tr>";
}
}
//剩余的空格
if (firstDay !== 0) {
for (i = firstDay; i < 7; i++) {
showStr += "<td><div></div></td>";
}
}
showStr += "</tr></tbody></table>";
//插入calendar的页面结构里
var html= $compile(showStr)($scope)
html.appendTo($("#showCld"))
// calendar.innerHTML = html;
//上一月
$scope.preMonth=function(){
if ($scope.month == 1) {
$scope.year-=1
showDate($scope.year , 12, $scope.day);
} else {
$scope.month-=1;
showDate($scope.year, $scope.month , $scope.day);
}
}
$scope.nextMonth=function(){
if ($scope.month == 12) {
$scope.year+=1;
showDate($scope.year , 1, $scope.day);
} else {
$scope.month+=1;
showDate($scope.year, $scope.month , $scope.day);
}
}
}
//显示年月日
function showDate(_year, _month, _day) {
var date = "",
firstDay = getFirstDay(_year, _month, _day);
if (_day !== 0) {
date = _year + "年" + _month + "月" + _day + "日";
} else {
date = "No Choose.";
}
document.getElementById("showDate").innerHTML = date; //日历头部显示
showCalendar(_year, _month, _day, firstDay); //调用日历显示函数
}
//初始化
// var calendar = document.createElement('div');
// calendar.setAttribute('id', 'showCld');
// document.getElementById("calendar-box").appendChild(calendar); //增加到你的box里
//获取当天的年月日
var today = new Date();
$scope.year = today.getFullYear(),
$scope.month = today.getMonth() + 1,
$scope.day = today.getDate();
var firstDay = getFirstDay($scope.year, $scope.month);
//显示日历
showCalendar($scope.year, $scope.month, $scope.day, firstDay);
}
})();上面是已解决的代码，是需要用到compile方法。谢谢大家~~~
解决方案
你代码要贴完整，你报错信息也要贴出来，这个是directive么？link里有preMonth方法么？动态生成的html有没有被compile捏？都是问题。。。
constroller的scope里没有preMoth方法诶。。。
这篇关于angular.js - angular字符串拼接点击事件没反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
