AngularJS:如何正确地设置/取消使用ng-repeat重复指令的变量

AngularJS: How to properly set/unset a variable with a directive repeated using ng-repeat?

本文关键字：ng-repeat 指令 变量 取消 正确地 设置 AngularJS      更新时间：2023-09-26

我写了一个指令，基本上应该将全局作用域的变量设置为某个值，如果鼠标单击它并返回到默认值，一旦鼠标被释放。

我让它工作，但因为我刚刚开始使用angular，我真的试图做正确的事情，甚至避免坏的编程习惯。

指令中也有一些DOM操作，但我将其简化为更改值的基本功能。

这是HTML:

<th ng-repeat="item in list" my-directive="{{$index}}" ng-model="clicked.current"></th>

这是(简化的)指令:

app.directive("myDirective", function () {
    return {
      scope: {
        model: "=ngModel",
        index: "@myDirective"
      },
      template: "<button ng-mousedown='mousedown()'>click</button>",
      link: function(scope, elm, attrs) {
        scope.mousedown = function () {
          scope.model = scope.index;
          angular.element(document).one("mouseup", function () { // react even if dragged out of element bounds
            scope.$apply(function () {
              scope.model = -1;
            });
          });
        };
      }
    };
  });

它工作如预期，但我不确定这是否是实现这一目标的最佳和最正确的方式。

我的问题是:

  1. 为此，我选择了正确的方法吗?
  2. 是否可以，我在链接函数中定义了mousedown方法，或者我应该使用"controller"选项为指令定义一个单独的控制器?
  3. 是否有一种方法来实现同样的事情(即只有一个参数的指令)?(我认为应该避免使用scope.$parent.$index)。
  4. 一般意见/建议?
感谢您的宝贵时间!

我认为没有ngModel你可以更容易地完成同样的事情。你可以在指令中直接使用父作用域变量。只需要删除这一点:

  scope: {
    model: "=ngModel",
    index: "@myDirective"
  },

这意味着作用域是隔离的。您可以删除它，并简单地从链接函数的attrs参数中读取索引。在控制器中保留一些状态$scope:

$scope.data = {};

，然后在一个指令中，你可以像这样读/写东西到控制器的作用域(假设你的指令的作用域不再是孤立的):

$scope.data.someVar = 1

注意:在对象的子作用域中保留要读/写的变量是很重要的。为了更好地理解作用域继承，我建议阅读以下内容:

理解范围

相关文章：