3

I'm building a simple website with AngularJS to learn more about the framework. I want to include a typing animation on the home view, and after looking through several options, I decided to add the jQuery plug-in Typed.js.

I began by adding all of the code in my index.html to see if I properly added it, which worked. But when I moved the script and HTML element into separate files and set up the route in app.js, the animation not longer played.

I tried following the solution laid out here in the answer to this question, but wasn't able to get it to work for me.

I've been looking into the possibility of creating a custom directive after reading some other articles, as well as tinkering with several jQuery event listeners, but I'm fairly stumped at this point.

I've researched some options that I can use if this one doesn't pan out, but I'd really like to stick with it to see if I can't walk away with a deeper understanding of Angular.

Community
  • 1
  • 1
Epps
  • 31
  • 3

2 Answers2

4

I have had a go at making typed.js into an angular directive. See the Plunkr here. The html directive is:

<typedjs strings=texttyping></typedjs>

where texttyping is an array defined in the scope. The javascript is:

angular.module('myApp', [])
.controller('mainController', ['$scope', function($scope) {
  $scope.texttyping = ["Hello, this is the first sentence", 
                        "Second sentence",
                        "Final sentence" ]
}])
.directive('typedjs', function () {
    return {
        restrict: 'E',    
        scope: { strings: '=' },
        template:'<span id="typed-output"></span>',
        link: function ($scope, $element, $attrs) {
          var options = {strings: $scope.strings,
                          typeSpeed: 2,
                          contentType: "html",
                          showCursor:true,
                          cursorChar:"="
                          };

          $(function(){
            $("#typed-output").typed( options );
          });
        }
    };
});

It would be good to put the options into the directive, rather than in an array in the js.

Steve Dunlop
  • 1,110
  • 2
  • 9
  • 10
0
controller.js
myApp.controller('updateController',['$scope',function($scope){
$scope.updates = ['This is update 1',
'This is the second update!'];

//typed.js function

$(function(){
    $(".update-box p").typed({
      strings:$scope.updates,
      typeSpeed: 40,
      loop: true,
      backDelay: 1500,
      contentType: 'text',
      loopCount: false,
      cursorChar: " |"
    });
  });
}]);

In the html page:
<div class="update-box" ng-controller="updateController">
        <p></p>        
</div>
user3406983
  • 1
  • 2