AngularJS-in指令计数器在else中恢复

我有一个指令，它将文本字段添加为过去的属性。我碰巧用counter++生成了这些字段的id。如果计数器恰好正确，则选项在内部相同，但当转到“其他”时，他开始计数

JS

function test($compile) {
  return {
    restrict: 'E',
    scope: {titulo: '@',icone:'@',corfundo:'@',tipo:'@'  },
    template: "<button type='button' class='btn btn-{{corfundo}} m-r-sm' ng-click='add()'><i class='fa {{icone}}'></i></button><span class='campos-texto'>{{titulo}}</span>",
    controller: function ($scope, $element) {
      var counter=0;
      $scope.add = function () {
        counter++;
        var el = ''

        if ($scope.tipo=='txtcurto'){
          el=$compile( "<div codigo='"+counter+"' class='textbox-curto col-md-6' ></div>" )($scope);
        }
        else if ($scope.tipo=='txtlongo'){
            el=$compile( "<div codigo='"+counter+"' class='textbox-curto col-md-12' ></div>" )($scope);
        }
        
        angular.element('#xmain').append(el)        
      };
    }
  };
}

功能测试（$compile）{
返回{
限制：'E'，
范围：{titulo:'@'，icone:'@'，corfundo:'@'，tipo:'@'}，
模板：“{{titulo}}”，
控制器：函数（$scope$element）{
var计数器=0；
$scope.add=函数（）{
计数器++；
变量el=''
如果（$scope.tipo=='txtcurto'）{
el=$compile（“”）（$scope）；
}
else if（$scope.tipo=='txtlongo'）{
el=$compile（“”）（$scope）；
}
angular.element（“#xmain”）.append（el）
};
}
};
}

HTML

<test titulo="Texto Curto" icone="fa-font" corfundo="danger" tipo="txtcurto"></test>
<test titulo="Texto Longo" icone="fa-font" corfundo="danger" tipo="txtlongo"></test>

结果

---

我有点不确定你的目标是什么。据我所知，该指令的行为与它所写的一致。如果您试图保证计数器全局唯一，则需要将计数器移出指令。由于

计数器

是在控制器中声明的，因此它会针对指令的每个新实例进行初始化

请尝试以下操作：

var counter=0; // counter moved to here
function test($compile) {
  return {
    restrict: 'E',
    scope: {titulo: '@',icone:'@',corfundo:'@',tipo:'@'  },
    template: "<button type='button' class='btn btn-{{corfundo}} m-r-sm' ng-click='add()'><i class='fa {{icone}}'></i></button><span class='campos-texto'>{{titulo}}</span>",
    controller: function ($scope, $element) {
      // removed counter from here
      $scope.add = function () {
        counter++;
        var el = ''

        if ($scope.tipo=='txtcurto'){
          el=$compile( "<div codigo='"+counter+"' class='textbox-curto col-md-6' ></div>" )($scope);
        }
        else if ($scope.tipo=='txtlongo'){
            el=$compile( "<div codigo='"+counter+"' class='textbox-curto col-md-12' ></div>" )($scope);
        }

        angular.element('#xmain').append(el)        
      };
    }
  };
}

var计数器=0；//柜台移到这里
功能测试（$compile）{
返回{
限制：'E'，
范围：{titulo:'@'，icone:'@'，corfundo:'@'，tipo:'@'}，
模板：“{{titulo}}”，
控制器：函数（$scope$element）{
//从这里移走柜台
$scope.add=函数（）{
计数器++；
变量el=''
如果（$scope.tipo=='txtcurto'）{
el=$compile（“”）（$scope）；
}
else if（$scope.tipo=='txtlongo'）{
el=$compile（“”）（$scope）；
}
angular.element（“#xmain”）.append（el）
};
}
};
}

能否显示使用此指令的HTML代码？您有两个元素。所以每一个都有它自己的控制器实例，以及它自己的计数器变量。没什么奇怪的。