Question

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

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

我尝试在this question的答案中遵循此处列出的解决方案，但无法让它为我工作。

在阅读其他一些文章之后，我一直在研究创建自定义指令的可能性，以及修补几个jQuery事件监听器，但我现在还是很难过。

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

Answer 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中的数组中。

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

Typed.js jQuery插件不能与ngRoute一起使用

2 个答案: