我正在使用.component()
template
属性处理Angularjs项目,但我不知道如何使用templateUrl
。
是否有人熟悉这可以为我提供一个有效的例子?
感谢。
答案 0 :(得分:3)
要正确使用角度组件,我建议使用controllerAs语法。
angular.module('myApp')
.component('groupComponent', {
templateUrl: 'app/components/group.html',
controller: function GroupController(){
this.innerProp = "inner";
},
controllerAs: 'GroupCtrl',
bindings: {
input: '<'
}
});
在group.html上,您可以按以下方式使用:
<div>
{{GroupCtrl.input}}
{{GroupCtrl.inner}}
</div>
来自父控件您可以将任何参数作为绑定传递给组件,在本例中来自父HTML:
<group-component input="someModel">
</group-component>
答案 1 :(得分:1)
templateUrl
是模板文件的路径。
例如
app.component('myview', {
bindings: {
items: '='
},
templateUrl: 'mycollection/view.html',
controller: function ListCtrl() {}
});
<强> view.html 强>
<h1> Welcome to this view </h1>
如上例所示,您必须在view.html
目录中包含mycollection
个文件。