Typed.js jQuery 插件不适用于 ngRoute答案

【问题标题】：Typed.js jQuery plug-in not working with ngRouteTyped.js jQuery 插件不适用于 ngRoute
【发布时间】：2015-03-27 23:49:40
【问题描述】：

我正在使用 AngularJS 构建一个简单的网站，以了解有关该框架的更多信息。我想在主视图中加入一个打字动画，看了几个选项后，我决定添加 jQuery 插件 Typed.js。

我首先在我的 index.html 中添加所有代码，看看我是否正确添加了它，这很有效。但是当我将脚本和 HTML 元素移动到单独的文件中并在 app.js 中设置路由时，动画不再播放。

我尝试按照this question 的答案中列出的解决方案进行操作，但无法让它为我工作。

在阅读了一些其他文章之后，我一直在研究创建自定义指令的可能性，以及修补几个 jQuery 事件侦听器，但在这一点上我相当难过。

我已经研究了一些选项，如果这个选项不成功，我可以使用，但我真的很想坚持下去，看看我是否不能对 Angular 有更深入的了解。

【问题讨论】：

你必须给我们看一些代码。您打算如何使用它？

标签： angularjs jquery-plugins ngroute

【解决方案1】：

我已经尝试将typed.js 变成一个角度指令。请参阅Plunkr here。 html指令是：

<typedjs strings=texttyping></typedjs>

其中texttyping 是在作用域中定义的数组。 javascript是：

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 );
          });
        }
    };
});

最好将选项放入指令中，而不是放在 js 中的数组中。

【讨论】：

【解决方案2】：

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>

【讨论】：