Question

我在app.js文件中有少量js，以便操作此Angular Grid中的DOM： http://plnkr.co/PXRgUA 你可以在app.js中看到它。

$('.userRow ').live('click', function(e) {
    $(this).find('span.userDetailRow.blueRow').show().animate({height:200},500);

});

$('.closeDetails').live('click', function(e) {
    $(this).parent('span').animate({height:0}, 500).animate({height:0},500).hide();
    e.stopPropagation();
});

如何将其移至指令？它是否必须转移到指令？这似乎不对。

Answer 1

是的，您可以（并且应该）将其移至指令。为了清楚起见，我将在此处包含您的旧代码：

   $('.userRow ').live('click', function(e) {
    $(this).find('span.userDetailRow.blueRow').show().animate({height:200},500);

});

$('.closeDetails').live('click', function(e) {
    $(this).parent('span').animate({height:0}, 500).animate({height:0},500).hide();
    e.stopPropagation();
});

这个（带有jquery的绑定事件监听器）正是人们在咬住时所描述的“不是有角度的方式”。相反，您可以使用ng-click（这只是一个内置指令）来调用javascript函数：

<tr row ng-click="expandRow()" ng-repeat="user in users" class="item-in-list el userRow" animate="fadeIn">

<span class="userDetailRow blueRow" style="display:none;"><span close ng-click="closeDetails(); $event.stopPropagation()">x</span>

您可以在此处看到，这些元素上定义了两个自定义属性。这些链接到下面的指令。这些指令在其链接函数中定义了自定义函数，然后可以使用ng-click调用（但请注意，这是将这些函数放在全局范围内）。

.directive('close', function() {
      return {
        restrict: 'A',
        replace: false,
        link: function($scope, element, attrs) {

            $scope.closeDetails = function() {
              $(element).parent('span').animate({height:0}, 500).animate({height:0},500).hide();
            }
        }
    }
})

.directive('row', function() {
  return {
    restrict: 'A',
    replace: false,
    link: function($scope, element, attrs) {
      $scope.expandRow = function() {
        $(element).find('span.userDetailRow.blueRow').show().animate({height:200},500);
      }

    }
  }
});

为了简单起见，jQuery仍然习惯于在这里定位和修改元素，因此您可以看到旧逻辑已经消失的位置。但是，您最好将其更改为使用angular的内置动画功能。（有关动画在新角度版本中如何工作的更多信息：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html）

Plunker：

http://plnkr.co/edit/UMvYnx?p=preview

如何将代码从App.js移动到Directive

1 个答案: