Angular指令和Jquery slideToggle函数实现

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

的index.html

       
    
 
This is section #1
 
 
 
This is another section #1
 
 
 
This is 3 section #1
 
 
  
    
  

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(' 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实现的建议。

谢谢

Answer 1

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

仅供参考，在撰写本文时，AngularJS团队正在添加一个ngAnimate指令，该指令将（希望）提供jQuery目前提供的大部分动画function，例如Slide，Fade等，这在IMO目前非常缺失。

HTML

 
    
 
This is section #1
 
 
 
This is another section #1
 
 
 
This is 3 section #1
 
  

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

Answer 2

@ GFoley83这让我非常感谢！ 我是新手，所以不确定这是否是添加建议帮助的正确方法，对不起，如果不是。 我也不是专家，所以我很高兴我的建议有待改进。

我需要项目开始隐藏，ng-init似乎没有做任何事情。 所以，我添加了第四个框，其属性设置为隐藏

使用代码@ GFoley83，我有一个额外的属性“start shown”添加到div将被切换。

   
 
This is 4 section and starts hidden
  

该指令也已更新，现在检查这个新属性。如果它被传递为false，我们将隐藏 – 否则它将像以前一样继续并从显示项目开始。

     返回{
        限制：“A”，
        范围： {
             isOpen：“= slideToggle”//属性
         }，
         link：function（scope，element，attr）{
             var slideDuration = parseInt（attr.slideToggleDuration，10）||  200;
             if（attr.startShown ==“false”）{
                 element.hide（）;
             }
            范围。$ watch（'isOpen'，function（newVal，oldVal）{
                 if（newVal！== oldVal）{
                     。element.stop（）的slideToggle（slideDuration）;
                 }
             }）;
         }
     };

Plunker更新： http ：//plnkr.co/edit/WB7UXK？p = preview

Answer 3

在尝试了Peter的解决方案后，我可以看到slideToggle下面的指令无法访问父作用域。 这是我的解决方案。

 evoapp.directive('slideToggle', function() { return { restrict: 'A', scope: false , link: function(scope, element, attr) { var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200; var toggle = attr.toggle ; scope.$watch(toggle, function(newVal,oldVal){ if(newVal !== oldVal){ element.stop().slideToggle(slideDuration); } }); } }; });