使用增量设置元素的 ID答案

【问题标题】：Set element's ID using increment使用增量设置元素的 ID
【发布时间】：2014-05-19 20:07:09
【问题描述】：

我需要设置 ID，我只使用模板和链接。 ID看起来像

id="number1"
id="number2"
id="number3"
...

id="number' + (index++)'"'

但未生成 ID。这不是循环。

如果我使用 $compile MyApp 不起作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script>

var index=0; //Iterator

angular.module('app', [])
 .directive('tttt', function(){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
                value: '@'
            },
      template: '<input type="text" id="number' + (index++) + '" ></input>', 

      link: function(scope, element, attrs) {
            scope.value = attrs.value;
     }
    };
});

</script>
<body>

<div ng-app="app">
    <tttt value="http://google.com">google</tttt>
    <tttt value="http://mail.ru">mail</tttt>
</div>

</body>
</html>

谢谢。

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

我不知道该索引的确切目的是什么，但假设您需要一个用于自动化或其他情况，我认为最好的方法是将您的索引保留在服务上（永远不要在窗口上作为全局变量！），在需要时获取它并在需要时增加它。或者，如果您总是获得增量，请使用一种方法。

所以我们会有类似的东西：

angular.module('myapp', [])
 .service('MyIdService', function(){
    var index = 0;

    this.getAndIncrement = function () {
        return index++;
    }
});

指令中的用法是：

angular.module('app', [])
 .directive('tttt', ['MyIdService', function(MyIdService){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
                value: '@'
            },
      template: '<input type="text" id="number{{index}}" ></input>', 

      link: function(scope, element, attrs) {
            scope.value = attrs.value;
            scope.index = MyIdService.getAndIncrement();
     }
    };
}]);

【讨论】：

您是否在插入此指令之前删除了您的指令？你能提供一个plunker吗？
是的。这是我的错误））您的代码有效。但它在我的应用程序中不起作用
你能详细说明一下吗？很难理解可能是什么问题。
如果你在同一个元素上有多个指令需要一个独立的作用域（在指令定义中由“范围：{...}”表示）。如果是这样，那么这个问题与我的解决方案无关，请尝试改用“范围：真”，看看是否仍然出现错误。如果还是报错，请通过 plunker 或 jsfiddle 复现，因为不看代码我不知道是什么问题。

【解决方案2】：

替换：

function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {value: '@'},
        template: '<input type="text" id="number' + (index++) + '" ></input>',
        link: function (scope, element, attrs) {
            scope.value = attrs.value;
        }
    };
});

与：

function () {
    var template = '<input type="text" id="number' + index + '" ></input>';
    index++;
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {value: '@'},
        template: template ,
        link: function (scope, element, attrs) {
            scope.value = attrs.value;
        }
    };
});

这应该适当地增加您的索引。

【讨论】：

索引是全局变量吗？？
没有。我得到了 id="number0" id=number0 id=number0 number0 e.t.))
那是因为在return子句之前运行的代码在应用程序的生命周期中只运行一次，所以模板的索引为0，然后你增加索引但没有再次调用此代码。
嗯。我刚刚更换了我的 angular.min.js。现在可以了。