AngularJS使用のmarqueeオン・オフのサンプル

marqueeの幅: {{marqueeWidth}}px

文字列の幅: {{pWidth}}px

HTML

<input type="text" ng-model="text">
<p>marqueeの幅: {{marqueeWidth}}px</p>
<p>文字列の幅: {{pWidth}}px</p>
<hr>
<div class="marquee">
  <p ng-class="{'on': isOver}">{{text}}</p>
</div>

CSS

input {
  width: 300px;
}
.marquee {
  overflow: hidden;
  width: 300px;
  background-color: #eee;
}
.marquee p {
  display: inline-block;
  margin: 0;
  white-space:nowrap;
}
.marquee p.on {
  -webkit-animation: marquee linear 10s infinite;
  animation: marquee linear 10s infinite;
}
@-webkit-keyframes marquee {
  0% { -webkit-transform: translate(100%);}
  100% { -webkit-transform: translate(-100%);}
}
@keyframes marquee {
  0% { transform: translate(100%);}
  100% { transform: translate(-100%);}
}

JavaScript

var app = angular.module('app', []);
var marqueeWidth = document.querySelector('.marquee').offsetWidth;
app.controller('Ctrl', function($scope, $timeout) {
  $scope.text = 'あいうえおかきくけこさしすせそたちつてとなにぬねの';
  $scope.$watch('text', function() {
      $timeout(function() {
        $scope.pWidth = document.querySelector('.marquee > p').offsetWidth;
        $scope.isOver = $scope.pWidth > marqueeWidth;
      }, 100);
  });
  $scope.marqueeWidth = marqueeWidth;
});