如何摆脱jQuery的增生并以有角度的方式改进我当前的指令
How to get rid of jQuery accretions and improve my current directive in angular way?
如果启用了间隔,我希望有带图标的按钮或链接,默认为glyphicon-play
或glyphicon-pause
。如何以更"有角度的方式"重构该指令,尤其是$element.hasClass("glyphicon-pause")
或$element.removeClass("glyphicon-pause").addClass("glyphicon-play");
?
<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();
}
});
}
};
}]);
使用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();
}
};
}
};
}]);
相关文章:
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- AngularJS:使用指令的最佳方式
- 如何在angularjs中以正确的方式在指令中使用ng repeat
- 如何摆脱jQuery的增生并以有角度的方式改进我当前的指令
- 适当的“;有角度的“;将行为传递给指令的方式
- AngularJS:以编程方式将ngif添加到指令中的最佳实践是什么?
- AngularJS:尝试以编程方式向视图添加指令
- 重新编译角度指令以编程方式添加 ng-module 和 ng-change
- 指令没有按照我想要的方式行事 - AngularJS
- Angular 什么是在 ng-repeat 指令中访问总对象的最佳方式
- 删除对象时执行元素指令动画的角度方式
- 以编程方式单击<A>来自AngularJS指令中的单元测试
- 什么'这是等待指令中启动的承诺得到解决的最佳方式
- AngularJS-这是写指令的正确方式吗
- 如何以嵌套方式将预定义指令(ng-click)与自定义指令一起使用
- angularjs-指令的模板是't编译的方式不对
- 在AngularJS的1.3和2版中创建指令作用域的方式是一样的
- 当使用$compile以编程方式创建指令时,如何调用link函数?
- 使用$compile以编程方式添加指令,并从作用域传递数据
- 用Angular的方式在指令中获取元素宽度