Question

我有一个外部模板文件，其中包含多个片段，在我的主页面中我想要包含一个来自此模板的片段，无法弄清楚如何，请指教。 Plunker链接http://plnkr.co/edit/p6d0dECPji5kwh9xFuVy?p=preview

我需要的例子

<div  ng-include ="'template1.html#sectionOne'"></div>

我尝试使用jquery加载模板并将其添加到$ templateCache它不起作用请咨询。

app.run(function($templateCache,$http) {
    $http.get('template1.html').success(function(template){
        console.log(' sectionOne Template '+ $(template).filter('#sectionOne').html());
        $templateCache.put('sectionOne.html',$(template).filter('#sectionOne').html());
        console.log(' sectionOne Template from cache '+$templateCache.get('sectionOne.html'));
    }).error(function () {

    });
});


<div  ng-include ="'sectionOne.html'"></div>

下面是我的代码新的plunker链接http://plnkr.co/edit/p6d0dECPji5kwh9xFuVy?p=preview

    <!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
  </head>

  <body ng-app="myApp">


    <div ng-include="'tempate1.hml'"></div>

<script type="text/javascript">

    var app=angular.module('myApp', []);
    app.run(function($templateCache,$http) {
        $http.get('ddComponent.html').success(function(template){
            $templateCache.put('template1.html',$(template).filter('#template1').html());
            $templateCache.put('template2.html',$(template).filter('#template2').html());
            $templateCache.put('template3.html',$(template).filter('#template3').html());

            console.log($templateCache.get('template1.html'));
            console.log($templateCache.get('template2.html'));
            console.log($templateCache.get('template3.html'));
        }).error(function () {
            alert('error');
        });
    });
</script>




  </body>

</html>

ddComponent.html的代码

<script type="text/ng-template" id="template3">
    <div >
            Content for template 3
    </div>
</script>

<script type="text/ng-template" id="template1">
        <div>
            Content for template1
        </div>
</script>

<script type="text/ng-template" id="template2">
    <div>
         Content for template 2
    </div>
</script>

Answer 1

也许您可以使用服务来加载HTML文件，提取模板（使用jQuery）并将它们存储在$templateCache中。
然后，您可以在控制器中使用此服务，以在视图中设置绑定到ngInclude的变量的值：

<!-- In the VIEW -->
<div ng-include="tmpl1"></div>

/* In the CONTROLLER */
.controller('SomeCtrl', function SomeCtrl($scope, TemplateLoader) {
  TemplateLoader.ready.then(function () {
    $scope.tmpl1 = 'template1.html';
  });
})

/* In the SERVICE */
.service('TemplateLoader', function TemplateLoader($http, $templateCache) {
  this.ready = $http.get('ddComponent.html').then(function (response) {
    var $template = $(response.data);
    $templateCache.put('template1.html', $template.filter('#template1').html());
    $templateCache.put('template2.html', $template.filter('#template2').html());
    $templateCache.put('template3.html', $template.filter('#template3').html());
  }).catch(function () {
    alert('Error !');
  });
});

另请参阅此 modified demo 。

Answer 2

我不认为可以使用带有ngInclude指令的angularJS从html文件加载片段。您最好的选择是使用这样的内联脚本（plunker）：

<!DOCTYPE html>
<html ng-app="myApp">

<head>

  <script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script type='text/ng-template' id="tpl1.html">
    <div>Template 1 </div> 
  </script>

  <script type='text/ng-template' id="tpl2.html">
    <div>Template 2 </div> 
  </script>

</head>

<body ng-controller="testCtrl">



  <div ng-include src="'tpl1.html'"></div>

</body>

</html>

来自模板的ng-include片段

2 个答案: