2016-11-27 3 views
0

À l'heure actuelle, j'ai tous les scripts Typewriter sur mon Index.html - cependant, la fonction onload ne se charge pas automatiquement lorsque je clique sur mes partiels; la façon actuelle de déclencher le script est d'avoir un bouton de lecture onclick.Comment charger automatiquement un script sur une partie angulaire

Existe-t-il un autre moyen?

//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

comment l'être chargée partielle dans la page? Honnêtement, rien de tout cela n'a l'air d'être anguleux en ce moment. Si vous voulez exécuter du code quand une nouvelle * vue * est chargée, vous le feriez à partir du contrôleur pour la vue. Dans le cas contraire, vous devrez probablement appeler votre script à partir de n'importe quel code pour que votre partiel soit chargé. Il est vraiment difficile de dire ce que vous essayez d'accomplir, car ce n'est pas une fonction angulaire, vous n'avez pas de HTML angulaire ici, et vous utilisez 'onclick',' onkeydown', etc. qui ne sont pas angulaire . sans un [mcve], tout cela n'est qu'une conjecture. – Claies

Répondre

0

Essayez ça:

// Ce script sur est 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'; 
    } 
}; 

</script>

+0

Ne semble pas fonctionner - merci bien! – user7214732