2016-11-27 2 views
0

지금은 Index.html에 모든 Typewriter 스크립트가 있습니다. 그러나 partial을 클릭하면 onload 함수가 자동으로로드되지 않습니다. 현재 스크립트를 트리거하는 방법은 onclick 재생 버튼을 사용하는 것입니다.각도 부분에 스크립트를 자동으로로드하는 방법

다른 방법이 있습니까?

//This is script on Index.html 
 

 
<script> 
 
    function Typewriter(sSelector, nRate) { 
 

 
    function clean() { 
 
     clearInterval(nIntervId); 
 
     bTyping = false; 
 
     bStart = true; 
 
     oCurrent = null; 
 
     aSheets.length = nIdx = 0; 
 
    } 
 

 
    function scroll(oSheet, nPos, bEraseAndStop) { 
 
     if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { 
 
     return true; 
 
     } 
 

 
     var oRel, bExit = false; 
 

 
     if (aMap.length === nPos) { 
 
     aMap.push(0); 
 
     } 
 

 
     while (aMap[nPos] < oSheet.parts.length) { 
 
     oRel = oSheet.parts[aMap[nPos]]; 
 

 
     scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos] ++ : bExit = true; 
 

 
     if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { 
 
      bExit = true; 
 
      oCurrent = oRel.ref; 
 
      sPart = oCurrent.nodeValue; 
 
      oCurrent.nodeValue = ""; 
 
     } 
 

 
     oSheet.ref.appendChild(oRel.ref); 
 
     if (bExit) { 
 
      return false; 
 
     } 
 
     } 
 

 
     aMap.length--; 
 
     return true; 
 
    } 
 

 
    function typewrite() { 
 
     if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { 
 
     clean(); 
 
     return; 
 
     } 
 

 
     oCurrent.nodeValue += sPart.charAt(0); 
 
     sPart = sPart.slice(1); 
 
    } 
 

 
    function Sheet(oNode) { 
 
     this.ref = oNode; 
 
     if (!oNode.hasChildNodes()) { 
 
     return; 
 
     } 
 
     this.parts = Array.prototype.slice.call(oNode.childNodes); 
 

 
     for (var nChild = 0; nChild < this.parts.length; nChild++) { 
 
     oNode.removeChild(this.parts[nChild]); 
 
     this.parts[nChild] = new Sheet(this.parts[nChild]); 
 
     } 
 
    } 
 

 
    var 
 
     nIntervId, oCurrent = null, 
 
     bTyping = false, 
 
     bStart = true, 
 
     nIdx = 0, 
 
     sPart = "", 
 
     aSheets = [], 
 
     aMap = []; 
 

 
    this.rate = nRate || 100; 
 

 
    this.play = function() { 
 
     if (bTyping) { 
 
     return; 
 
     } 
 
     if (bStart) { 
 
     var aItems = document.querySelectorAll(sSelector); 
 

 
     if (aItems.length === 0) { 
 
      return; 
 
     } 
 
     for (var nItem = 0; nItem < aItems.length; nItem++) { 
 
      aSheets.push(new Sheet(aItems[nItem])); 
 
      /* Uncomment the following line if you have previously hidden your elements via CSS: */ 
 
      // aItems[nItem].style.visibility = "visible"; 
 
     } 
 

 
     bStart = false; 
 
     } 
 

 
     nIntervId = setInterval(typewrite, this.rate); 
 
     bTyping = true; 
 
    }; 
 

 
    this.pause = function() { 
 
     clearInterval(nIntervId); 
 
     bTyping = false; 
 
    }; 
 

 
    this.terminate = function() { 
 
     oCurrent.nodeValue += sPart; 
 
     sPart = ""; 
 
     for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false)); 
 
     clean(); 
 
    }; 
 
    } 
 

 
/* usage: */ 
 
var oTWExample1 = new Typewriter(/* elements: */ "#homecopy, #bluebox, #first, #second, #third, #fourth, #fifth", /* frame rate (optional): */ 100); 
 
/* default frame rate is 100: */ 
 
// var oTWExample2 = new Typewriter("#controls"); 
 
// var oTWExample3 = new Typewriter(/* elements: */ "#second", /* frame rate (optional): */ 100); 
 

 
onload = function() { 
 
    oTWExample1.play(); 
 
    // oTWExample2.play(); 
 
}; 
 

 
function enter2(ele) { 
 
    if (event.keyCode == 13) { 
 
    document.getElementById("second").style.display = 'block'; 
 
    } 
 
}; 
 

 
function enter3(ele) { 
 
    if (event.keyCode == 13) { 
 
    document.getElementById("third").style.display = 'block'; 
 
    } 
 
}; 
 

 
function enter4(ele) { 
 
    if (event.keyCode == 13) { 
 
    document.getElementById("fourth").style.display = 'block'; 
 
    } 
 
}; 
 

 
function enter5(ele) { 
 
    if (event.keyCode == 13) { 
 
    document.getElementById("fifth").style.display = 'block'; 
 
    } 
 
}; < /script>
//This is a partial - I'd like it to automatically load the index.html script when the user is on the page - somehow only the onlock in the "controls" triggers the script 
 

 
    <p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span>&nbsp;]</p> 
 

 
    <div id="poeminput" > 
 
    <div id="first" > 
 
    $he went to the <form><input type="text" onkeydown="enter2(this)"/></form> 
 
    </div> 
 
    </div> 
 

 
<input action="action" type="button" id="back" value="Back" onclick="history.go(-1);" />

+0

스크립트입니다 페이지에? 솔직히이 중 어느 것도 지금은 모퉁이처럼 보입니다. 새로운 * 뷰 *가로드 될 때 코드를 실행하려면 뷰의 컨트롤러에서 코드를 수행합니다. 그렇지 않으면, 부분 코드를로드하는 코드에서 스크립트를 호출해야 할 것입니다. 각도 함수가 아니고 여기에 각도 HTML이 없으며 각도 인식이 아닌'onclick','onkeydown' 등을 사용하고 있기 때문에 확실하게하려고하는 것을 말하기는 정말로 어렵습니다. . [mcve]가 없다면 이는 모두 추측입니다. – Claies

답변

0

그냥이 시도 :

//이 어떻게로드되는 부분이다 Index.html을에

<script> 

    onload(); // you need to actually call the function! 

    function Typewriter(sSelector, nRate) { 

    function clean() { 
     clearInterval(nIntervId); 
     bTyping = false; 
     bStart = true; 
     oCurrent = null; 
     aSheets.length = nIdx = 0; 
    } 

//....content omitted for breviety 

onload = function() { 
    oTWExample1.play(); 
    // oTWExample2.play(); 
}; 

//...content omitted 

function enter5(ele) { 
    if (event.keyCode == 13) { 
    document.getElementById("fifth").style.display = 'block'; 
    } 
}; 

</스크립트>

+0

작동하지 않는 것 같습니다 - 고마워요! – user7214732

관련 문제