Angular Direktiven mit $ templateRequest

Question

So injiziere ich die gleichen HTML-Vorlagen auf Knopfdruck und nachdem ich Name in Input-Tag mit eckigen Anweisungen eingegeben.

Das sind meine Richtlinien:

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

Das ist mein HTML-Template Mir Injektion:

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

Also, wenn ich zum ersten Mal der Injektion alle sehen gut aus, aber wenn ich zweites Mal Injektion sowohl erste und zweite Vorlage wird mit dem gleichen Wert, und das ist, was passiert mit dritten und vierten und so weiter ...

Wie ich verstehe es ist, weil $ templateRequest nach dem ersten inje ction legt die Vorlage auf $ templateCache und deshalb werden alle Vorlagen mit dem gleichen Namen.

Wie könnte ich dieses Problem lösen und jede Injektion mit verschiedenen Namen machen?

Answer 1

Also wenn jemand mit dieser Art von Problem kollidiert, korrigierte ich meinen Code. Einer meiner Richtlinien sieht nun wie folgt aus:

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

ich zusätzliche <div> Tag zusammengefasst und Wert meine HTML-Namen mit jquery und nicht die Winkel von $ scope Variable gesetzt werden.