Question

我有一个div，我想用baffle.js进行争夺，它应该是一个纯粹的javascript文本动画库，我希望能够用服务器更新（SSE）替换乱码文本在它被揭露之前。

我可以处理服务器的东西，我只需要知道如何将像挡板这样的非角度js库组合到我的角度控制器中。

HTML ：

<div class="baffle">ad124asfd$afarA1</div>

当服务器响应时，我想用实际数据覆盖div：

<div class="baffle">{{Server Response}}</div>

然后最后停止争夺动画，以便在dom中看到新数据：

<div class="baffle">My server response!</div>

这是我的控制器：

app.controller("MainController", ['$scope', 'LxNotificationService', '$http', 'postService', 'getService', '$baffle', function ($scope, LxNotificationService, $http, postService, getService, $baffle) {

// Start baffle on any element(s).
$scope.scramble = function () {
    $('.baffle').each(function(i) {
      (function() {
        var Baffle;
        Baffle = function() {
          function Baffle() {
            var $baffle, b;
            $baffle = $('.baffle');
            b = baffle('.baffle', {
              characters: '+-\u2022~\u2591\u2588\u2593 \u2593\u2592\u2591!=*',
              speed: 100
            });
            $baffle.addClass('is-started');
            b.start();
            b.reveal(2000);
            setTimeout(()=>inProgress = false,2500)
          }
          return Baffle;
        }();
        $(function() {
          return new Baffle();
        });
      }.call(this));
    });
};

$scope.scramble();


}]);

我得到的只是控制器中的注入器错误，但是如果我不将其作为依赖注入，则表示挡板未定义... $injector:unpr] Unknown provider: $baffleProvider <- $baffle <- MainController

Answer 1

这是我想出的基于你所拥有的简单解决方法。

你可以让你的Angularjs代码做任何它想做的事情   然后你了解时机的逻辑。

由于 AngularJS 在直接设置时会失去 {{text}} 的值。

我决定 2 div。

带有“挡板”类的div会有挡板但隐藏在 3之后   秒使用设置为true的ng-hide指令并隐藏   格。

angulartextDiv 类的div从 text 变量中获取其值。

请参阅下面的代码。

<强> HTML

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div class="angulartextDiv">
      {{ text }} 
    </div>
    <div ng-hide="hideDiv" class="baffle"> 
      Testing my text
    </div>
  </div>
</div>
<script src="https://cdn.rawgit.com/camwiegert/baffle/master/dist/baffle.min.js"></script>
<script>
   var c = baffle('.baffle')
    .start()
    .set({
        characters: "+-\u2022~\u2591\u2588\u2593 \u2593\u2592\u2591!=*",
        speed: 100
    });
  c.start();
  c.reveal(3000);
</script>

<强> AngularJS

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, $timeout) {
 // Your code    
  $scope.mytext = function() {
        $scope.text = "Testing my text"; 
    };
   $timeout( function(){
           return $scope.mytext();
        }, 3000 );

   $timeout(function() {
         $scope.hideDiv = true;
      }, 3000);
});

这是codepen https://codepen.io/seyz4all/pen/VzWBqG

希望这有帮助

如何将Baffle.js与Angularjs应用程序

1 个答案: