2

使用 $compile 为我的指令创建动态模板时，我遇到了范围丢失的问题。请参阅下面的代码（为清楚起见进行了修剪）：

(function () {
'use strict';

angular.module('cdt.dm.directives').directive('serviceSources', ['$http', '$templateCache', '$compile', '$parse',
function ($http, $templateCache, $compile, $parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            type: '=',
            sources: '='
        },
        link: function (scope, element, attr) {
            var template = 'Template_' + scope.type + '.html';

            $http.get(template, { cache: $templateCache }).success(function (tplContent) {
                element.replaceWith($compile(tplContent)(scope));
            });

            $compile(element.contents())(scope);
        }
    }
}
])
})();

有效并且加载了html模板。

html 模板如下所示：

<table>
<thead>
    <tr>
        <th>File</th>           
    </tr>
</thead>
<tbody data-ng-reapeat="src in sources">
    <tr>
        <td>{{src.fileName}}</td>
    </tr>
</tbody>

sources 是一个包含两个元素的数组。在指令的范围内，它绝对是正确的，但在模板中，ng-repeat 不起作用（我猜是因为现阶段未定义源）。

有人知道我在做什么错吗？

4

1 回答 1

2

我认为有一个错字：ng-repeat而不是data-ng-reapeat,ng-repeat应该放在<tr>

<table>
<thead>
    <tr>
        <th>File</th>           
    </tr>
</thead>
<tbody>
    <tr ng-repeat="src in sources">
        <td>{{src.fileName}}</td>
    </tr>
</tbody>

请注意，这$http.get是 async 并记住将代码包装在scope.$apply. 你应该像这样修改你的代码：

link: function (scope, element, attr) {
            var template = 'Template_' + scope.type + '.html';

            $http.get(template, { cache: $templateCache }).success(function (tplContent) {
              scope.$apply(function(){ 
                element.replaceWith(tplContent);
                $compile(element)(scope);
                //Or
                //element.html(tplContent);
                //$compile(element.contents())(scope);
               });
            });
        }
于 2013-10-05T12:26:05.227 回答