如何摆脱 jQuery 增生并以 angular 方式改进我当前的指令？

Question

我想要按钮或带图标的 link，如果启用间隔，则默认为 glyphicon-play 或 glyphicon-pause。我如何重构此指令，尤其是 $element.hasClass("glyphicon-pause") 或 $element.removeClass("glyphicon-pause").addClass("glyphicon-play"); in more "angular way"?

<button play class="btn glyphicon glyphicon-play"></button>

当前指令：

app.directive('play', ['$interval', function ($interval) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
            var i = 0,
                interval;


            var play = function () {
                $interval.cancel(interval);
                interval = $interval(function () {
                    $scope.states[i].active = false;
                    $scope.states[i++].active = true;
                    i = i % 3;
                }, 1000);
            };


            var stop = function () {
                $interval.cancel(interval);
            };
            console.log($element, attrs);


            $element.on('click', function ($event) {
                if ($element.hasClass("glyphicon-pause")) {
                    $element.removeClass("glyphicon-pause").addClass("glyphicon-play");
                    stop();
                } else {
                    $element.removeClass("glyphicon-play").addClass("glyphicon-pause");
                    play();
                }
            });
        }
    };
}]);

Answer 1

使用 ng-class 和 ng-click 将是这里最 angular 的两个改进。

<button play class="btn glyphicon" ng-class="{glyphicon-play: isPlaying, glyphicon-pause: !isPlaying}" ng-click="togglePlay()"></button>

app.directive('play', ['$interval', function ($interval) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
            $scope.isPlaying = false;
            var i = 0,
                interval;

            var play = function () {
                $scope.isPlaying = true;
                $interval.cancel(interval);
                interval = $interval(function () {
                    $scope.states[i].active = false;
                    $scope.states[i++].active = true;
                    i = i % 3;
                }, 1000);
            };


            var stop = function () {
                $scope.isPlaying = false;
                $interval.cancel(interval);
            };
            console.log($element, attrs);

            $scope.togglePlay = function() {
              if($scope.isPlaying){
                stop();
              }else{
                play();
              }
            };
        }
    };
}]);

如何摆脱 jQuery 增生并以 angular 方式改进我当前的指令？

How to get rid of jQuery accretions and improve my current directive in angular way?

javascript

angularjs

angularjs-directive