Angular 指令和 Jquery slideToggle 函数的实现 - IT屋-程序员软件开发技术分享社区
首页 其他开发 Angular 指令和 Jquery slideToggle 函数的实现
Angular 指令和 Jquery slideToggle 函数的实现
[英] Angular directive and Jquery slideToggle function implementation
本文介绍了Angular 指令和 Jquery slideToggle 函数的实现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 angular 和 jquery 我实现了 slideToggle 功能.为了仅将此函数应用于一个特定的 HTML 元素，我在 ng-click 函数中使用了一个参数，我的代码运行良好，但是，我想知道是否存在另一种更好的方法来实现指令和 ng-click 函数的角度:
index.html
<html ng-app="myApp" ng-controller="MainController"><头><title></title><link type="text/css" rel="stylesheet" href="css/styles.css"/><身体><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="切换第三个"><div class="div1" section="first" toggle="first" ><p>这是部分#1</p> <div class="div1" toggle="second"><p>这是另一个部分#1</p>
<div class="div1" toggle="第三个"><p>这是 3 节 #1</p>
<页脚><script src="js/jquery.min.js"></script><script src="js/angular.js"></script><script src="js/directives.js"></script></页脚></html>styles.css
.div1 {背景:棕色；宽度:200px；高度:200px；文本对齐:居中；}.div1 p {位置:相对；顶部:50%；}directives.js
angular.module("myApp", [])//.controller('MainController', function($scope) {$scope.toggle = 函数(部分){console.log('<切换功能>部分:'+部分);$scope.section = 部分；$scope.$broadcast('event:toggle');}})//.directive('toggle', function() {返回函数(范围，元素，属性){scope.$on('event:toggle', function() {if(attrs.toggle == scope.section){elem.slideToggle('fast');}});};});我自己关心的一个问题是我在指令和作用域之间的沟通方式:
$scope.section = section; 和
if(attrs.toggle == scope.section){对于更好的 Angular 实现的任何建议，我将不胜感激.
谢谢
解决方案
Plunker 演示: http://plnkr.co/edit/u69puq?p=preview
仅供参考，在撰写本文时，AngularJS 团队正在添加 ngAnimate
HTML
<input type="button" value="Toggle First" ng-click="box1=!box1"><input type="button" value="Toggle Second" ng-click="box2=!box2"><input type="button" value="切换第三个" ng-click="box3=!box3"><div class="div1" data-slide-toggle="box1" data-slide-toggle-duration="100" ><p>这是部分#1</p>
<div class="div2" data-slide-toggle="box2" data-slide-toggle-duration="2000"><p>这是另一个部分#1</p>
<div class="div3" data-slide-toggle="box3"><p>这是 3 节 #1</p>
JS
var myApp = angular.module("myApp", []);myApp.controller('MainController', function($scope) {$scope.box1 = $scope.box2 = $scope.box3 = true;});myApp.directive('slideToggle', function() {返回 {限制:'A'，范围:{isOpen: "=slideToggle"},链接:函数(范围，元素，属性){var slideDuration = parseInt(attr.slideToggleDuration, 10) ||200；scope.$watch('isOpen', function(newVal,oldVal){if(newVal !== oldVal){element.stop().slideToggle(slideDuration);}});}};});
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;
and
if(attrs.toggle == scope.section){
I will appreciate any advice for a better Angular implementation.
Thanks
解决方案
Plunker Demo: http://plnkr.co/edit/u69puq?p=preview
FYI, at the time of writing, the AngularJS team are adding an ngAnimate
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);
}
});
}
};
});
这篇关于Angular 指令和 Jquery slideToggle 函数的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
