Pat*_*cow 3 html javascript templates button angularjs
我有这种情况:
<somebutton></somebutton>
...
app.directive("somebutton", function(){
return {
restrict: "E",
scope: {
// not sure what i can do here
},
template: '<button ng-click="loadTemplate()" type="button">Text</button>',
link: function(scope, element){
scope.loadTemplate = function(){
//TODO: append "home.html" template inside body directive
}
}
}
});
...
<script type="text/ng-template" id="home.html">
<div>home</div>
</script>
...
<div body ></div>
执行此操作的其他方法可能是使用html中的按钮而不是模板
<button ng-click="loadTemplate()" type="button">Text</button>
然后可能有一个控制器,其中包含loadTemplate()加载模板的方法
但我不知道如何做到这一点.
混乱？是的:)
有关这个问题的任何想法？
谢谢
看看ngInclude它是否符合您的需求.您可以将其绑定到模板URL以动态更改加载的模板.
<body>
<button ng-click="template='home.html'">Home</button>
<button ng-click="template='home2.html'">Home 2</button>
<div ng-include src="template"></div>
</body>
<script type="text/ng-template" id="home.html">
<div>loaded home</div>
</script>
<script type="text/ng-template" id="home2.html">
<div>loaded home 2</div>
</script>
另请注意,大多数AngularJS应用程序可能使用内置路由来根据URL加载适当的控制器和视图.有关更多信息,请参阅$ route上的教程和文档/示例.