javascript - Angularjs:这是使用指令的正确位置吗？

Question

我最近从 jQuery 切换到 Angularjs，并且正在为之前用 jQuery 风格的 Javascript 编写的链接(“下一个”、“上一个”等)重新编码一些分页逻辑。

每个链接都有一个 ngIf 条件(例如，如果您位于第 1 页，则不会显示“上一个”链接)以及一个 ngClick 事件，该事件本质上更新了一个名为 $scope.pagination.position 的范围变量，该变量确定表中显示哪些结果。

我的原始代码是这样的(为了清楚起见，进行了简化):

模板

<a ng-if="pagination.position > 0" ng-click="pagination.first()">First</a>

Controller

$scope.pagination = {
   first: function() {
      this.position = 0;
   }
}

然后我了解了有关指令的更多信息，以及如何使用指令创建大多数非静态 HTML 的 DOM 元素。因此，我将每个链接(因为每个链接都有自己的显示规则和点击行为)切换为自己的指令，如下所示:

模板

<a pagination-first></a>

指令

app.directive('paginationFirst', function() {
   return {
      link: function(scope,el,attr) {
         scope.pagination.first = function() {
            scope.pagination.position = 0;
         }
      },
      replace: true,
      template: '<a pagination-first ng-if="pagination.position > 0" ng-click="pagination.first()">First</a>'
   }
});

我会开门见山:我的指令错了吗？从我的 Angular 来看，所发生的一切是我从模板中包含逻辑转变为逻辑中包含模板，并且我在指令中而不是在 Controller 中定义了单击事件函数。

现在是使用指令的合适时机吗？

我想学习最佳实践，所以我很想知道我是否错过了重点，以及原始的基于模板的 ngIf 和 Controller 函数方法是否很好，即使使用比如图所示。

Answer 1

如果我想将特定行为添加到 dom 或 dom 列表，那么我通常会创建一个指令。从 Angular JS 的 Angular 来看，dom 操作只能通过指令来完成(对我来说这是最好的地方，有时由于我缺乏知识，我不得不违背这一点)。我特别发现指令 use full 在创建小部件时。在我的一个项目中，有一个部分专门用于显示图像并上传图像。我只是使用顶部 div 上的指令，在链接函数的帮助下，我将事件处理程序附加到各个子 dom。而且因为我的项目不需要隔离的范围(因为这个小部件全部在单个项目中使用，并且外部范围在我的控制之下)。所以它就像一个魅力。我曾经确认过该指令。并在项目的其余部分使用该小部件，因为它的行为和设计(小部件)在整个项目中都是相同的。对于分页小部件，您可以创建一个指令。将指令属性值作为分页参数的输入。就像调用脚本一样，限制偏移量。用于更新内容的容器标识符。然后你就可以只专注于分页行为。但根据我的经验(因为我在 Angular js 方面也没有那么丰富的经验)，有时开发一个指令并在整个项目中使用它会变得有点忙碌。在某些地方我们需要修改指令的行为。为此，它可能会在其他地方破裂。但我知道，随着我了解的越多，我会更有效地处理这种情况。希望我的经验对你有帮助。