Question

当使用$ 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不起作用（我想因为在这个阶段未定义来源）。

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

Answer 1

我认为有一个拼写错误：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是asyn并记得将代码包装在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);
               });
            });
        }

angularjs：使用$ compile时指令中的范围问题

1 个答案: