-2
JavaScript로 타임 라인을 만듭니다. 그게 완벽하게 작동합니다. 하지만 그것을 각도 js로 변환하거나 Controller.How 모든 자바 스크립트 코드를 배치할까요. 누구나 나를 도와 줄 수 있습니다.Javascript 코드를 각도 j로 변환
난이 코드 전체를 하나의 컨트롤러로 만들고 싶습니다. 하지만 컨트롤러에 코드를 넣으면 오류가 많이 발생합니다. 사실 나는 각도 js에 새로운 있습니다. 나를 도와주세요.
여기에 내 코드
<html>
<head>
<style type="text/css">
body {font: 10pt arial;}
#mytimeline {
width: 100%;
height: 300px;
}
div.timeline-event-range {
font-size: 12pt;
font-family: purisa, cursive;
color: purple;
border-width: 3px;
top:106px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://almende.github.io/chap-links-library/js/timeline/timeline.js"></script>
<link rel="stylesheet" type="text/css" href="http://almende.github.io/chap-links-library/js/timeline/timeline.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var timeline;
var intervals;
google.load("visualization", "1");
google.setOnLoadCallback(drawVisualization);
var stdate = "";
var edate;
var inters;
var interend;
var row;
var data = [
{
'start': new Date(2010, 6, 20, 11, 0, 0),
'end': new Date(2010, 6, 20, 11, 0, 20),
'content': 'Video7',
}, {
'start': new Date(2010, 6, 20, 11, 0, 10),
'end': new Date(2010, 6, 20, 11, 0, 12),
'content': '<div class="gapdiv1" style="background:red;">Gap</div>',
},
{
'start': new Date(2010, 6, 20, 11, 0, 14),
'end': new Date(2010, 6, 20, 11, 0, 16),
'content': '<div class="gapdiv2" style="background:red;">Gap</div>',
}
];
function drawVisualization() {
// specify options
var options = {
"width": "100%",
"height": "200px",
"style": "box"
};
// Instantiate our timeline object.
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
// Draw our timeline with the created data and options
timeline.draw(data);
$('.timeline-event-range').css('top', '95px');
var onselect = function() {
var sel = timeline.getSelection();
console.log(sel);
if (sel.length) {
if (sel[0].row != undefined) {
row = sel[0].row;
intervals = setInterval(MyTimer, 1000);
stdate = (data[row].start).toString();
edate = data[row].end;
var today = new Date(data[row].start);
timeline.draw(data);
go(stdate)
$('.timeline-event-range').css('top', '95px');
}
}
};
google.visualization.events.addListener(timeline, 'select', onselect);
}
function adjustVisibleTimeRangeToAccommodateAllEvents() {
timeline.setVisibleChartRangeAuto();
}
function move(moveVal) {
timeline.move(moveVal);
timeline.trigger("rangechange");
timeline.trigger("rangechanged");
}
function moveToCurrentTime() {
timeline.setVisibleChartRangeNow();
}
var MyTimer = function() {
var s = new Date(stdate);
var s1 = new Date(edate);
s.setSeconds(s.getSeconds() + 1);
stdate = s.toString();
go(stdate)
if ((s.toString() === s1.toString()) && (stdate != "Invalid Date"))
{
clearInterval(intervals);
}
}
links.events.addListener(timeline, 'rangechange', function (properties) {
animateCancel();
});
var animateTimeout = undefined;
var animateFinal = undefined;
function animateTo(date) {
// get the new final date
animateFinal = date.valueOf();
timeline.setCustomTime(new Date(animateFinal));
// cancel any running animation
animateCancel();
// animate towards the final date
var animate = function() {
var range = timeline.getVisibleChartRange();
var current = (range.start.getTime() + range.end.getTime())/2;
var width = (range.end.getTime() - range.start.getTime());
var minDiff = Math.max(width/1000, 1);
var diff = (animateFinal - current);
if (Math.abs(diff) > minDiff) {
// move towards the final date
var start = new Date(range.start.getTime() + diff/4);
var end = new Date(range.end.getTime() + diff/4);
timeline.setVisibleChartRange(start, end);
//console.log("start"+start);
// start next timer
animateTimeout = setTimeout(animate, 50);
}
};
animate();
}
function animateCancel() {
if (animateTimeout)
{
clearTimeout(animateTimeout);
animateTimeout = undefined;
}
}
function collision($div1, $div2) {
try {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
var h2 = $div2.outerHeight(true);
var w2 = $div2.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if ((x1 > x2 && r1 < r2) || (x2 > r1))
return false;
return true;
} catch (err)
{
return false;
}
}
function go(x) {
var date = new Date(x);
if (date.toString() == "Invalid Date") {
alert("Invalid Date");
} else {
animateTo(date);
}
}
$(document).ready(
function() {
var time = new Date();
var flg = 0;
intervals = setInterval(function() {
var range = timeline.getVisibleChartRange();
var current = (range.start.getTime() + range.end.getTime())/2;
$('div.dispTime').text(new Date(current));
//stdate=new Date(current);
}, 1);
setInterval(function() {
$('.timeline-event-range').css('top', '95px');
//console.log(collision($('.gapdiv'),$('.currTime')));
for (var j = 0; j < data.length; j++)
{
if (collision($('.gapdiv' + (j + 1)), $('.currTime')))
{
flg = 1;
}
}
if (flg == 1)
{
$(".gapping").text("Gap Found");
flg = 0;
} else {
$(".gapping").text("");
}
}, 1);
$("div.timeline-event-range").style("margin-top", "105px;");
}
);
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="dispTime" style="margin-left:600px;"></div>
<div id="mytimeline"></div>
<div class="currTime" style="height:200px;width:4px;z-index:30000;background:blue;margin-left:50%;margin-top:-300px; position:relative;"></div>
<div class="gapping"></div>
<!-- <div>
<input id="animateDate" value="2010-05-20" placeholder="yyyy-MM-dd">
<button id="go" onclick="go(new Date(2010, 6, 20, 11, 0, 0))" readonly>PlayVideo</button>
</div>-->
<h3>For Play Video Click On VIDEO7 Tab In Timeline</h3>
</body>
</html>
나중에,하지만 나는 각도로 변환하겠습니까 –
케이크를 만들고 싶다면 빵을 배워야합니다. 당신은 테이블에 당신의 재료를 던지기 만하고 그것을 케이크로 만드는 방법을 묻지 않을 것입니다. 요리 책이나 2를 읽으십시오. –
각도에 대해서도 알고 있습니다. 각도에서도 작동하지만 이것은 각도에서 작동하지 않는 타임 라인 플러그인입니다.이 코드를 각도에 넣기를 원할 때 \ –