В следующем фрагменте ниже будут напечатаны предложения «Это первое предложение ...», «Это второе предложение ...», «Это третье предложение ...», «Это четвертое предложение... "с эффектом пишущей машинки, используя угловой.
Теперь мой вопрос: есть ли способ убрать «Это четвертое предложение ...» после эффекта ввода?Я просто хочу, чтобы он показывал все предложения «один раз», а не «цикл».
angular.module("angular.typewriter", [])
.directive("typewriter", ["$timeout", "$compile", function($timeout, $compile){
return {
restrict: "EA",
template: "",
scope: {
typeSpeed: '@',
loop: '=loop',
loopDelay: '@',
customStyle: '=customStyle',
cursor: '=cursor',
shell: '=shell',
messages: '=',
newline: '=newline'
},
link: function(scope, element, attrs){
//console.log("Typewriter directive...");
scope.typeSpeed = scope.typeSpeed || 100;
scope.loopDelay = scope.loopDelay || 2000;
scope.customStyle = scope.customStyle || false;
scope.cursor = scope.cursor || true;
scope.shell = scope.shell || false;
scope.newline = scope.newline || false;
if(scope.cursor){
var contentCursor = angular.element('<span class="cursor"> |</span>');
contentCursor.insertAfter(element);
$compile(contentCursor)(scope);
}
if(scope.shell){
var contentShell = angular.element('<span class="shell" style="font-family: \'Consolas\', \'Courier New\', \'Courier\'">$ </span>');
contentShell.insertBefore(element);
$compile(contentShell)(scope);
}
scope.typewrite = function(element, text, n, loop){
if(n<text.length+1){
if(text.substring(n-1,n)=='<'){
$timeout(function(){
scope.typewrite(element, text, n+2, scope.loop);
}, scope.loopDelay);
}
else{
element.html(text.substring(0,n));
$timeout(function(){
scope.typewrite(element, text, n+1, scope.loop);
}, scope.typeSpeed);
}
}
else if(scope.loop) {
$timeout(function(){
scope.typewrite(element, text, 0, scope.loop);
}, scope.loopDelay);
}
}
scope.typewrite_msgs = function(element, text_array, array_idx, n, loop){
if(n<text_array[array_idx].length+1){
element.html(text_array[array_idx].substring(0,n));
$timeout(function(){
scope.typewrite_msgs(element, text_array, array_idx, n+1, loop);
}, scope.typeSpeed);
}
else if(array_idx+1 < text_array.length){
$timeout(function(){
scope.typewrite_msgs(element, text_array, array_idx+1, 0, loop);
}, scope.loopDelay);
}
else if(scope.loop) {
$timeout(function(){
scope.typewrite_msgs(element, text_array, 0, 0, loop);
}, scope.loopDelay);
}
}
if(scope.messages){
if(scope.newline) {
var whole_msg = '';
angular.forEach(scope.messages, function(value, key){
whole_msg = whole_msg + value + "<br>";
})
scope.typewrite(element, whole_msg, 0, scope.loop);
}
else {
scope.typewrite_msgs(element, scope.messages, 0, 0, scope.loop, scope.newline);
}
}
else {
var text = element.html();
//var length = text.length;
//console.log(text + ": " + length);
scope.typewrite(element, text, 0, scope.loop);
}
if(!scope.customStyle){
element.css("font-family", '"Consolas", "Courier New", "Courier"');
element.css("background-color", "#000000");
element.css("color", "#f0f0f0");
}
}
}
}]);
var demoApp = angular.module("demoapp", ["angular.typewriter"]);
demoApp.controller("mainCtrl", ["$scope", function($scope){
console.log("Controller...");
$scope.sentences = ["This is the first sentence ...", "This is the second sentence ... ", "This is the third sentence ...", "This is the forth sentence ..." ];
}]);
<html ng-app="demoapp">
<head>
<style>
.shell-input {
display: inline-block; width:500px; height:40px; background-color: #000000;margin:auto; border-radius:10px;padding:10px;
}
.title {
padding-top:20px;display:inline-block;float:left;margin-bottom:5px;font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;font-weight:300;color:blue;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 14px;
background-color: #eeeeee;
color: #949494;
}
* {
box-sizing: border-box;
}
header {
margin-bottom:60px;
z-index:2;
background-color: #3f51b5;
padding: 1em 3em 1em 3em;
color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
position: relative;
}
</style>
</head>
<body ng-controller="mainCtrl" style="text-align: center;">
<header>
<h1>Angular Typewriter</h1>
</header>
<div style="width:500px;display:inline-block;">
<span class="title">Messages One-line Loop, speed:150</span>
<span class="shell-input" style="text-align:left;">
<span class="typewriter" typewriter type-speed="50" loop=false messages="sentences" loop-delay="1000" custom-style=false cursor=true shell=false newline=false>Welcome, type-write your message here!</span>
</span>
</div>
</body>
</html>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src="js/index.js"></script>
Любой ответ с благодарностью.