Question

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

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

ID =＆＃34;数＆＃39; +（index ++）＆＃39;＆＃34;＆＃39;

但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>

感谢。

Answer 1

替换：

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;
        }
    };
});

这应该适当增加你的指数。

Answer 2

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

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

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();
     }
    };
}]);

使用增量设置元素的ID

2 个答案: