如何使用AngularJS中的自定义指令将一个html页面插入另一个html页面？

Question

使用自定义指令，我想将一个HTML页面添加到另一个，这怎么办？ 自定义指令如下：

(this is the .js file)
 fbModule.directive('fbLogin', function(){
        return {
            template : html
        }        
 })

并且要包含的html页面是：

(this is the .html file to be included)
<div ng-controller="fbCtrl">
    <button ng-click="doFacebookLogin">
        <img src="modules/shippingAddress/fastfill_fb.png" width="140px" height="25px;" style="margin-right: 8px; cursor:pointer">
    </button>
</div>

上面代码应该出现的页面是：

(this is the .html file in which the above html should come)
<div fbLogin></div>
<div style="font-size: x-small; color: black;">Save on typing. Use your FB data.</div>

请帮助..提前致谢

Answer 1

您应该使用ngInclude将HTML注入另一个页面https://docs.angularjs.org/api/ng/directive/ngInclude

<ng-include src="somehtmlfile.html"></ng-include>

Answer 2

你需要的，如果你需要得到外部HTML一样，如下图所示更改模板 templateUrl。

templateUrl也可以是一个函数，它返回要加载并用于指令的HTML模板的URL。 Angular将使用两个参数调用templateUrl函数：调用该指令的元素和与该元素关联的attr对象。

工作演示

  fbModule.directive('fbLogin', function() {
    return {
      template: 'template.html'
    };
  });

至

  fbModule.directive('fbLogin', function() {
    return {
      templateUrl: 'template.html'
    };
  });

Answer 3

基本上：

 fbModule.directive('fbLogin', function(){
         return {
             templateUrl : "...path to html"
         }});

...但请阅读开发者指南https://docs.angularjs.org/guide/directive

Answer 4

使用templateUrl而不是模板。 你的templateUrl必须指向目录中的html文件。 这里我的templeUrl指向my.html，它位于模板目录中。

fbModule.directive('fbLogin', function(){
        return {
            templateUrl : "/templates/my.html"
        }        
 })

Answer 5

如果你想用指令加载的html文件完全替换指令标签，你应该使用templateUrl: 'path/to/file.html'并replace: true这样你的指令标签就会被html取代而不是被包含在其中。 这是指令示例：

app.directive('fbLogin', function(){
  return {
      templateUrl : 'include.html',
      replace: true
  }        
});

此外，这是工作的plunker 。