Question

我需要在页面中点击加载模板html。我试着这样做：

Angular JS：

$scope.selectDialog = function (id, event){ 
   $scope.template = '/template/chat/active_dialog.html';
};

HTML：

<div ng-include="template"></div> Does not work
<div ng-include="{{template}}"></div>
<div>{{template}}</div>

Answer 1

两种方式，

这个：

$scope.selectDialog = function (id, event)
{ 
   $scope.template = [ 
      { name: 'template1.html', url: 'template1.html'},
      { name: 'template2.html', url: 'template2.html'} 
   ];
       $scope.template = $scope.templates[0];
};

并在您的页面

<div ng-include="template.url"></div>

或者您可以使用templateCache

  $scope.selectDialog = function (id, event){ 
       $scope.template = $templateCache.get('/template/chat/active_dialog.html');
    };

Answer 2

如果没有看到所有代码，很难说出你做错了什么。但我在Plunker中创建了一个工作版本代码：

http://plnkr.co/edit/Ll1x35zhDG72Mc5qYD04?p=preview

index.html：

<body ng-app="includeExample">
  <div ng-controller="ExampleController">
    <button ng-click="selectDialog()">Select Dialog</button>

    <div ng-include="template"></div>

  </div>
</body>

控制器：

angular.module('includeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
   $scope.template = '';
  $scope.selectDialog = function (id, event){ 
     $scope.template = 'active_dialog.html';
     console.log($scope.template);
  }; 
}]);

Answer 3

ng-include起初非常棘手。它的创建是为了减轻外部资源的负载。所以：

ng-include="template"会尝试加载/template资源服务器
ng-include="template.url"会尝试加载/template.url资源在服务器上。
ng-include="templates/main.html"将加载/templates/main.html 服务器上的资源。

在变量（或角度语言中的表达式）中引用URL的唯一方法是将表达式包装在 single quotes 中。话虽如此，您的主模板应该是这样的：

<div ng-include="'template'"></div> Not single quotes inside double ones.

如何在Angular JS中显示模板？

3 个答案: