角指令和jQuery的slideToggle功能实现 [英] Angular directive and Jquery slideToggle function implementation
问题描述
使用角度和jQuery我实现的slideToggle功能。为了仅适用此功能一个特定的HTML元素，我使用的NG-点击功能一个参数内，我的code正常工作，但是，我想知道是否存在执行指令和NG-点击功能另一种更好的办法在角：
Using angular and jquery I implemented slideToggle function. In order to only apply this function to one specific HTML element, I am using within ng-click function one parameter, my code works fine but, I want to know if exists another better way to implement directives and ng-click functions in angular:
的index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="MainController">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div>
<input type="button" ng-click="toggle('first')" value="Toggle First">
<input type="button" ng-click="toggle('second')" value="Toggle Second">
<input type="button" ng-click="toggle('third')" value="Toggle third">
<div class="div1" section="first" toggle="first" >
<p>This is section #1</p>
</div>
<div class="div1" toggle="second">
<p>This is another section #1</p>
</div>
<div class="div1" toggle="third">
<p>This is 3 section #1</p>
</div>
</div>
</body>
<footer>
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/directives.js"></script>
</footer>
</html>
styles.css的
.div1 {
background: Brown;
width: 200px;
height: 200px;
text-align: center;
}
.div1 p {
position: relative;
top: 50%;
}
directives.js
angular.module("myApp", []) //
.controller('MainController', function($scope) {
$scope.toggle = function(section) {
console.log('<toggle function> section :' + section);
$scope.section = section;
$scope.$broadcast('event:toggle');
}
}) //
.directive('toggle', function() {
return function(scope, elem, attrs) {
scope.$on('event:toggle', function() {
if(attrs.toggle == scope.section){
elem.slideToggle('fast');
}
});
};
});
我自己的一个问题是，我的指令和范围之间的通信方式：
One concern of my own is the way that I am communicating between directive and scope:
$scope.section = section;
和
if(attrs.toggle == scope.section){
我将AP preciate一个更好的角度实施的任何建议。
I will appreciate any advice for a better Angular implementation.
感谢
推荐答案
Plunker演示：的 http://plnkr.co/edit/u69puq?p=$p$pview
仅供参考，在写作的时候，AngularJS团队正在添加的 ngAnimate 的指令这将（希望）报价大多认为目前的jQuery提供动画功能，例如：滑动，淡入淡出等，这是非常的时刻缺少IMO。
FYI, at the time of writing, the AngularJS team are adding an ngAnimate directive which will (hopefully) offer most of the animate functionality that jQuery currently offers, e.g. Slide, Fade etc, which is sorely missing at the moment IMO.
HTML
<div data-ng-controller="MainController">
<input type="button" value="Toggle First" ng-click="box1=!box1">
<input type="button" value="Toggle Second" ng-click="box2=!box2">
<input type="button" value="Toggle third" ng-click="box3=!box3">
<div class="div1" data-slide-toggle="box1" data-slide-toggle-duration="100" >
<p>This is section #1</p>
</div>
<div class="div2" data-slide-toggle="box2" data-slide-toggle-duration="2000">
<p>This is another section #1</p>
</div>
<div class="div3" data-slide-toggle="box3">
<p>This is 3 section #1</p>
</div>
</div>
JS
var myApp = angular.module("myApp", []);
myApp.controller('MainController', function($scope) {
$scope.box1 = $scope.box2 = $scope.box3 = true;
});
myApp.directive('slideToggle', function() {
return {
restrict: 'A',
scope:{
isOpen: "=slideToggle"
},
link: function(scope, element, attr) {
var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200;
scope.$watch('isOpen', function(newVal,oldVal){
if(newVal !== oldVal){
element.stop().slideToggle(slideDuration);
}
});
}
};
});
这篇关于角指令和jQuery的slideToggle功能实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
