javascript – 如何将Baffle.js与Angularjs应用程序结合使用

2023年4月17日 155次阅读

我有一个div我想用
baffle.js争抢,它应该是一个纯粹的javascript文本动画库,我希望能够在显示之前用服务器更新(SSE)替换乱码文本.

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

HTML：

< div class =“baffle”> ad124asfd $afarA1< / div>

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

< div class =“baffle”> {{Server Response}}< / div>

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

< div class =“baffle”>我的服务器响应！< / 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]未知提供者：$baffleProvider< – $baffle< – MainController

最佳答案

Here’s what i came up with as an easy solve based on what you have.

You can have your Angularjs code do whatever it’s suppose to do and
then you around with the logic of timing.

Since AngularJS looses the value of {{text}} when it is set directly.

I decided to have 2 divs.

The div with the class “baffle” plays with baffle but hides after 3
seconds using the ng-hide directive that sets to true and hides the
div.

The div of class angulartextDiv gets its value from the text variable.

请参阅下面的代码.

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

希望这可以帮助

点赞