使用$ templateRequest

Question

所以我在按钮点击时注入相同的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));
            });           
        });
    };
});

这是我正在注入的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>

所以当我第一次注射时看起来都很好，但是当我第二次注射时，第一个和第二个模板都变成了相同的值，这就是第三次和第四次发生的事情，等等......

据我所知，这是因为第一次注入后$ templateRequest将模板放到$ 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而不是angular的$ scope变量。