angularjs - Typed.js jQuery 插件不适用于 ngRoute

Question

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

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

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

在阅读了一些其他文章后，我一直在研究创建自定义指令的可能性，以及对几个 jQuery 事件监听器进行修补，但此时我感到很困惑。

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

Answer 1

我尝试制作了 typed.js进入 Angular 指令。查看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 中的数组中。