$ templateRequestを使用した角形指示

Question

ボタンのクリック時に同じHTMLテンプレートを挿入しています。角度指定付きの入力タグに名前を入力した後です。

これらは私のディレクティブは以下のとおりです。

<div class="new_folder"> 
    <div class="folder_icon"> 
     <div class="folder_icon_border"> 
      <div class="folder_icon_bubble"></div> 
      <div class="folder_icon_bubble"></div> 
      <div class="folder_icon_bubble"></div> 
     </div> 
    </div> 
    <div class="folder_name"> 
     <p class="folder_name_txt">{{folder_name}}</p> 
    </div> 
</div> 

私が初めて注入するときに、すべてが良いように見えますが、ときに私は両方の二度目の注入：これは私が注入てる私のHTMLテンプレートが

$scope.folder_name = ''; 
$scope.folder_count = 0; 

cheapWatcherApp.directive("addfolder", function() { 
    return { 
     restrict: "E", 
     templateUrl: chrome.extension.getURL('views/folderName.html') 
    } 
}); 

cheapWatcherApp.directive("addfolder", function ($compile, $templateRequest) { 
    return function ($scope, $element, $attrs) { 
     $('.createBtn').bind("click", function() { 
      $scope.folder_count++; 
      $scope.folder_name = document.getElementById('folder_name').value; 
      $templateRequest(chrome.extension.getURL('views/newFolder.html')).then(function (html) { 
       var template = angular.element(html);    
       angular.element(document.getElementById('space-for-folders')).append($compile(template)($scope)); 
      });   
     }); 
    }; 
}); 

です1番目と2番目のテンプレートは同じ値になります。それは3番目と4番目のように起こります...

私が理解しているのは、最初のinje後の$ templateRequest ctionは$ templateCacheにテンプレートを置きます。そのため、すべてのテンプレートが同じ名前になります。

どのようにしてこの問題を克服し、すべての注入に異なる名前を付けることができますか？

Answer 1

誰かがこの種の問題にぶつかると、コードを修正しました。私のディレクティブの一つは次のようになります。

cheapWatcherApp.directive("addfolder", function ($compile, $templateRequest) { 
    return function ($scope, $element, $attrs) { 
     $('.createBtn').bind("click", function() { 
      $scope.folder_count++; 
      angular.element(document.getElementById('space-for-folders')).append($compile('<div class="folder_' + $scope.folder_count + '"></div>')($scope)); 
      $templateRequest(chrome.extension.getURL('views/newFolder.html')).then(function (html) { 
       var template = angular.element(html); 
       angular.element($('.folder_' + $scope.folder_count)).append($compile(template)($scope)); 
       $('.folder_' + $scope.folder_count + ' .new_folder .folder_name .folder_name_txt').text($('.folder_name').val());     
      }); 
     }); 
    }; 
}); 

私は、追加<div>タグをコンパイルし、私のhtml名の値はjQueryとないの角度$スコープ変数を設定するようにしました。