[英]How to get rid of jQuery accretions and improve my current directive in angular way?
I would like to have button or link with icon, default glyphicon-play
or glyphicon-pause
if interval is enabled. 如果启用了间隔,我想要按钮或带有图标的链接,默认
glyphicon-play
或glyphicon-pause
。 How can I refactor this directive especially $element.hasClass("glyphicon-pause")
or $element.removeClass("glyphicon-pause").addClass("glyphicon-play");
如何重构该指令,尤其是
$element.hasClass("glyphicon-pause")
或$element.removeClass("glyphicon-pause").addClass("glyphicon-play");
in more "angular way"? 以更“有角度的方式”?
<button play class="btn glyphicon glyphicon-play"></button>
Current directive: 当前指令:
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();
}
});
}
};
}]);
Using ng-class and ng-click would be the two most angular-like improvements here. 在这里,使用ng-class和ng-click将是两个最像角度的改进。
<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();
}
};
}
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.