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

使用自定义指令，我想添加一个HTML页面到另一个，如何做到这一点？自定义指令是如下：如何使用AngularJS中的自定义指令将一个html页面插入到另一个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>

请帮助.. 在此先感谢

来源

2014-11-04 Pepper

看看我的回答 – 2014-11-04 09:45:26

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

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

Working Demo

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

到

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

来源

2014-11-04 09:42:28

Cool .. Thanks ...它是一个模块，在同一个应用程序中，它也开始使用'template'工作。 – Pepper 2014-11-04 10:28:10

你应该b e。使用ngInclude注入HTML到另一个页面 https://docs.angularjs.org/api/ng/directive/ngInclude

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

来源

2014-11-04 09:25:14

没有，添加额外的功能，我们必须保持在模块的代码，因此不能使用“NG-包括”。 – Pepper 2014-11-04 10:05:21

Thanks ... This works .. – Pepper 2014-11-04 12:01:33

基本上是：

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

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

来源

2014-11-04 09:25:57 Adrian

使用templateUrl代替模板。你的templateUrl必须指向目录中的html文件。这里我的templeUrl指向模板目录内的my.html。

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

来源

2014-11-04 09:29:36 manas

如果你想完全取代由指令你应该使用templateUrl: 'path/to/file.html'和replace: true所以你的指示标记都被取代HTML而不是被纳入它加载HTML文件指示标记。这里是指令例子：

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

而且，这里是工作plunker。

来源

2014-11-04 09:41:30

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

回答

相关问题