Question

我有一个名为_include.tmpl.html的外部模板，它的内容是：

<script id="sBlock1" type="text/ng-template">
<li ng-repeat="user in users" data-customer-id="{{user.CustomerID}}" ng-class-odd="'alternate'" ng-click="GetOrdersForUser($event)">
    <span class="name">{{user.ContactName}}</span><br>
    <span class="title">{{user.ContactTitle}}</span><br>
    <span class="phone">{{user.Phone}}</span><br>
    <span class="country">{{user.Country}}</span>
</li>
</script>

我想加载外部模板，将其提供给我的用户数组并获取编译结果？我在尝试以下没有运气？

 $http.get('_include.tmpl.html', { cache: $templateCache })
        .then(function (response) {

            var test = $compile(response.data)($scope.users);
            console.log(test);
        });

用例是 - 用于无限滚动。向下滚动，我从数据库中获取结果将结果提取到模板，获取已编译的html并将其附加到DOM。每次向下滚动都会得到更多结果，结果会不断附加到DOM元素。

Answer 1

应为$compile(response.data)($scope);。

考虑到_include.tmpl.html模板已加载，而sBlock1位于模板缓存中，则必须

$http.get('sBlock1', { cache: $templateCache })
        .then(function (response) {

            var test = $compile(response.data)($scope);
            console.log(test);
        });

Answer 2

您似乎试图模仿自定义指令可以为您做什么

HTML

<users></users>

JS

angular.module('myApp').directive('users', function(){
   return {
       templateUrl:'_include.tmpl.html' 
   };    
});

这将使服务器端为您调用ajax并填充数据。它还会将模板存储在$templateCache中，因此无需另外调用服务器

但是，您需要删除包装脚本标记，这是当前导致问题的一部分

AngularJS获取外部模板和$ compile

2 个答案: