Angular指令和Jquery slideToggle函数实现

发布时间：2020-12-17 08:00:14 所属栏目：安全来源：网络整理

导读：使用angular和jquery我实现了slideToggle函数.为了只将这个函数应用于一个特定的HTML元素,我在ng-click函数中使用了一个参数,我的代码工作正常,但是,我想知道是否存在另一个更好的方法来实现angular中的指令和ng-click函数：的index.html !DOCTYPE htmlhtml

使用angular和jquery我实现了slideToggle函数.为了只将这个函数应用于一个特定的HTML元素,我在ng-click函数中使用了一个参数,我的代码工作正常,但是,我想知道是否存在另一个更好的方法来实现angular中的指令和ng-click函数：

的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');
                }
            });
        };
    });

我自己的一个问题是我在指令和范围之间进行沟通的方式：

$scope.section = section;

和

if(attrs.toggle == scope.section){

我将不胜感激任何更好的Angular实现的建议.

谢谢

Plunker演示： http://plnkr.co/edit/u69puq?p=preview

仅供参考,在撰写本文时,AngularJS团队正在添加一个ngAnimate指令,该指令将(希望)提供jQuery目前提供的大部分动画功能,例如：滑动,褪色等,目前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>

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);
        }
      });
    }
  };  
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!