ディレクティブは、私は私のアンギュラアプリケーションでカスタムディレクティブを定義した複数回

Question

を使用した場合に一意のIDを追加します。このディレクティブは、フォーム要素を作成するために、1ページ内で複数回使用されて

app.directive('foobarDirective', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'foobar.html' 
    }; 
}); 

。ただし、一度に1つのインスタンスしか表示されません。

問題は、フォームに入力フィールドを参照するラベルがあることです。ディレクティブが複数回使用されるため、IDはもはやユニークではなく、ラベルのfor -mechanismは失敗します。

<div class="row"> 
    <div class="col-md-12"> 
    <label for="foobar" translate="foobar"></label> 

    <span class="label label-danger" ng-show="model.foobar.length > 255" translate="warn_too_long"></span> 

    <textarea id="foobar" auto-height 
     type="text" class="form-control" 
     ng-model="model.foobar"></textarea> 
    </div> 
</div> 

私はこれについて何かできることはありますか？別の記事では、id="foobar_{{$id}}"を使用して一意のIDを追加することができますが、私のケースでは、labelとtextareaに異なるIDが追加されています。だから、これは私にとって大きな助けにはならない。

//編集1：マイラベルと警告が拡張子をアンギュラ翻訳使用して翻訳されています。これにより、各要素の期待値が異なる$idという異なる要素が発生しました。

//編集2：さらに、各ディレクティブに複数のラベルとテキストフィールドがあります。私は最終的に、ディレクティブごとのIDを維持し、ラベルとテキストフィールドの各ペアに固有のプレフィックスを付加することで、私の問題を解決することができました。参照してください：https://jsfiddle.net/7pxn5cxu/14/

Answer 1

私はあなたの問題を十分に理解していないかもしれませんが、$idをユニークな識別子として使用できないのはなぜですか？

---

FINAL WORKING SOLUTION

VIEW

<!-- application container --> 
<div ng-app="app"> 

    <!-- directive view template --> 
    <script type="text/ng-template" id="foobar.html"> 
    <p>origId: {{origId}}</p> 
    <div class="row"> 
     <div class="col-md-12"> 
     <label for="foobar_{{origId}}" class="foobar_{{origId}}" translate="foobar"></label> 
     <br /> 
     <span class="label label-danger foobar_{{origId}}" translate="foobarWarning"></span> 
     <br /> 
     <textarea id="foobar_{{origId}}" auto-height type="text" class="form-control" ng-model="scope.model.foobar" placeholder="id: foobar_{{origId}}"></textarea> 
     </div> 

     <div class="col-md-12"> 
     <label for="bar_{{origId}}" class="bar_{{origId}}" translate="bar"></label> 
     <br /> 
     <span class="label label-danger bar_{{origId}}" translate="barWarning"></span> 
     <br /> 
     <textarea id="bar_{{origId}}" auto-height type="text" class="form-control" ng-model="scope.model.bar" placeholder="id: bar_{{origId}}"></textarea> 
     <br /> 
     <strong>Model:</strong> {{scope.model}} 
     </div> 
    </div> 
    </script> 

    <foobar-directive></foobar-directive> 
    <br/> 
    <foobar-directive></foobar-directive> 

</div> 

DIRECTIVE

angular 
.module('app', ['pascalprecht.translate']) 

.directive('foobarDirective', function() { 
    return { 
    restrict: 'E', 
    scope : {}, 
    templateUrl: 'foobar.html', 
    link: function(scope, element, attrs) { 
     console.log('linked' , scope.$id); 
     scope.origId = scope.$id; 
    } 
    } 
}); 

https://jsfiddle.net/7pxn5cxu/14/

---

EDIT

ディレクティブリンク機能から事前に生成されたユニークなIDに$id使用を使用して更新しました。この世代のUUIDは、再利用可能なサービスのラッパーであるUUIDServiceです。AngularJS $idアプローチはまだhere

VIEW

<!-- application container --> 
<div ng-app="app"> 

    <!-- directive view template --> 
    <script type="text/ng-template" id="foobar.html"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <label for="foobar_{{::id}}">label for foobar_{{::id}}</label> 
     <span class="label label-danger"></span> 
     <br/> 
     <textarea id="foobar_{{::id}}" auto-height type="text" class="form-control" ng-model="model.foobar" placeholder="id : foobar_{{::id}}"></textarea> 
     <br/> 
     <strong>Model:</strong> {{model}} 

     </div> 
    </div> 
    </script> 

    <foobar-directive></foobar-directive> 
    <br/> 
    <foobar-directive></foobar-directive> 

</div> 

DIRECTIVE/SERVICE

angular 
    .module('app', []) 
    .directive('foobarDirective', foobarDirective) 
    .service('UUIDService', UUIDService) 

/* directive */ 
function foobarDirective(UUIDService) { 
    var directive = { 
    templateUrl: 'foobar.html', 
    scope: { 
     model: '=' 
    }, 
    link: function(scope, element, attrs) { 
     scope.id = UUIDService.generateUUID(); 
    }, 
    restrict: 'E' 
    }; 
    return directive;  
} 

/* UUIDService */ 
function UUIDService() { 
    return { 
    generateUUID: generateUUID 
    } 

    function generateUUID() { 
    function s4() { 
     return Math.floor((1 + Math.random()) * 0x10000) 
     .toString(16) 
     .substring(1); 
    } 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
     s4() + '-' + s4() + s4() + s4(); 
    }; 
} 

JSFiddle

01を参照してください見つけることができます使用して

前の答え

Answer 2

rootscopeを使用して、最後に使用されたディレクティブのIDを覚えてから、それを増やすことができます。ここには動作例があります（）。例を実行してソースを確認すると、すべてのテキストのIDはです。私のアプリケーションで

var app = angular.module("app", []); 
 
app 
 
    .controller('Controller', function($scope, $rootScope) { 
 
    $rootScope.directiveID = 0; 
 
    }) 
 
    .directive("testDirective", function($rootScope) { 
 
    return { 
 
    controller: function($scope, $rootScope) { 
 
     if ($rootScope.directiveID == undefined) { 
 
     $rootScope.directiveID = 0; 
 
     } else { 
 
     $rootScope.directiveID = $rootScope.directiveID + 1; 
 
     } 
 
    
 
    
 
    }, 
 
    template: '<div>All of have different div(check in the source)</div>', 
 
    link: function(scope,elem,attr){ 
 
      scope.directiveIDS = angular.copy($rootScope.directiveID); 
 
     elem.attr("id","dir_"+scope.directiveIDS); 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <test-directive></test-directive> 
 
    <test-directive></test-directive> 
 
    <test-directive></test-directive> 
 
    <test-directive></test-directive> 
 

 
    </div> 
 
</body> 
 

 
</html>