javascript - 使用 angularJS 自定义弹出窗口

Question

我正在尝试在不使用 jquery 的情况下在 angularJs 中开发一个过滤器。我正在使用自定义指令创建一个包含复选框的弹出窗口。我有两个疑问

1. 这里有 2 个弹出窗口，它们是使用 ng-repeat 创建的，我在指令中传递了一些参数。如果我传递像下面这样的简单字符串，它将正常工作

      <input checkbox-all="0-isSelected-id1"  class="clsInput" />
      app.directive('checkboxAll', function () {
      return function(scope, iElement, iAttrs) {

         //here we can split this string 
         var parts = iAttrs.checkboxAll.split('-');
        });

但是如果我这样通过

      <input checkbox-all="{{$index}}-isSelected-id{{$index}}"  class="clsInput" />
      app.directive('checkboxAll', function () {
      return function(scope, iElement, iAttrs) {

         //it will come undefined
         var parts = iAttrs.checkboxAll.split('-');
        });

我需要将该索引传递给该指令，因为所有代码都在一个 ng-repeat 中。

2. 这两个弹出窗口具有相同的类和不同的 id，我想在点击 2 div 时显示此弹出窗口。我想在不使用 jquery 的情况下执行此操作。每次点击我想为该弹出窗口设置两种样式(左侧和顶部用于将该 div 定位在适当的位置)

要求

这里我添加了我的代码，它并不完美

code

Answer 1

看看这个 jsFiddle

要将索引传递给指令，不需要在属性中传递索引。 $index 已在范围内定义，您可以通过 scope.$index 在 checkboxAll 指令中访问它。

app.directive('checkboxAll', function () {
return function(scope, iElement, iAttrs) {
var arrayContent=scope.mainList[scope.$index].list;

iElement.attr('type','checkbox');
iElement.attr('value','All');
//iElement.attr('id','All'+parts[2]);//check this id in design
iElement.bind('change', function (evt) {
var selectedval=evt.currentTarget.value;
  scope.$apply(function () {
    var setValue = iElement.prop('checked');
    angular.forEach(arrayContent,function(v){
        v.isSelected=setValue;
    });
  });
});

至于弹出行为，我添加了 div.subpart1 作为 div.sub1 的子项。 div.subpart1 具有 position:absolute，因此您可以设置 margin-left 属性以将其显示为弹出窗口。

为了控制弹出窗口的可见性，我添加了一个数组 $scope.IsVisible=[false,false]，它具有所有弹出窗口的可见性状态。

HTML 在这里:

<div class="sub1" >
<div class="subpart1" ng-repeat="val in mainList" ng-click="click($event,$index)" >
  <div id={{val.name}} class="mainPopup" ng-show="IsVisible[$index]" >
    <div class="rowSep">
  <input checkbox-all class="clsInput" /> 
       <div class="sub" ng-click="testa($event,val.list)" parent="Allid{{$index}}"> All</div>
    </div>
    <div ng-repeat="elem in val.list" class="rowSep">
      <input type="checkbox" ng-model="elem.isSelected" class="clsInput" /> 
      <div class="sub" ng-click="testa($event,val.list)"> {{elem.desc}}</div>
    </div>
</div>
</div>
</div>