Question

我创建了一个带有日期选择器的指令，里面有一个名为calendar的日期选择器。实际的日期选择器javascript已经在JQuery中创建，并且为了能够设置ng-model，我发现以下代码有效：

var clickedID = "#" + $scope.indexid + "_datePicker";
$(clickedID).trigger('input');

问题是$ scope.indexid始终显示为日历指令数组中的最后一个值。

为了澄清，例如，该指令将我的变量显示如下：

[
  { indexid: 1},
  { indexid: 2},
  { indexid: 3}
]

当在页面中点击任何日历时，$ scope.indexid将始终返回3（数组中的最后一项）。我该如何解决这个问题？

这是一个非常难以解释的问题。如果您想了解更多信息，请告诉我们。我会尝试添加尽可能多的内容。

编辑更多代码：

//Index Page

<div ng-repeat="item in items">

 <calendar indexid="{{$index}}"></calendar>

</div>


//In the Directive
scope: {
  ngModel: "=",
  indexid: "@"
}

//In Directive Controller
console.log($scope.indexid);   

//In the directive template
<input type="text" ng-model="testModel" id="{{::indexid}}"/>

Answer 1

循环遍历数组时，需要通过引用传入每个对象，以便能够在其上设置值。你这样做：

<div ng-repeat="item in items">
  <calendar item="item"></calendar>
</div>

item将保存数组中的当前元素，因此必须从中调用索引。

在你的指令中，你可以这样设置：

scope: {
  item: "=" // reference to 'item' from the parent scope ... your loop
},
template: '<input type="text" ng-model="testModel" id="{{::item.indexid}}"/>',
link: function ($scope) {
  console.log($scope.item.indexid);

  console.log($scope.testModel); // this is the value of the input
}

此模式应该可以让您更好地访问每个数组项。通过引用将其传入，您可以回写它;指令内item所做的更改将在外部作用域的items数组中看到。

ng-repeat中的Angular Directive获取当前点击的项目$ scope

1 个答案: