[英]How to populate a HTML div on click event using Angularjs
What is the best way of populate a div (or ng-include) with a ready .html template using anuglarjs, not using ng-view and routing ? 什么是使用anuglarjs 而不是ng-view和routing用现成的.html模板填充div(或ng-include)的最佳方法?
for ex: 例如:
<div>
<ng-include src="" />
</div>
<input type="button" ng-click="getTemplate()" value="Get template" />
$scope.getTemplate = function() {
//Get and..populate template here
}
Use ng-if
or ng-show
: 使用ng-if
或ng-show
:
<div ng-if="templateVisible">
<ng-include src="" />
</div>
<input type="button" ng-click="getTemplate()" value="Get template" />
$scope.getTemplate = function() {
$scope.templateVisible = true;
}
And using ng-show
: 并使用ng-show
:
<div ng-show="templateVisible">
<ng-include src="" />
</div>
<input type="button" ng-click="getTemplate()" value="Get template" />
$scope.getTemplate = function() {
$scope.templateVisible = true;
}
The difference between the two is that ng-if
doesn't populate the DOM, when the condition is false, while ng-show
does, but marks it as display: none
. 两者之间的区别在于,当条件为false时, ng-if
不会填充DOM,而ng-show
会填充DOM,但是将其标记为display: none
。
Using ng-show/ng-hide/ng-if
使用ng-show/ng-hide/ng-if
<div ng-controller="TodoCtrl">
<div ng-show="show">Hello</div>
<button ng-click="showHide()">Boom</button>
</div>
function TodoCtrl($scope) {
$scope.show = true;
$scope.showHide = function(){
$scope.show = !$scope.show
}
}
Difference between ngShow/ngHide
& ngIf
- ng-if
will remove elements from DOM. 之间 差 ngShow/ngHide
& ngIf
- ng-if
将删除的DOM元素。 This means that all your handlers or anything else attached to those elements will be lost. 这意味着您所有的处理程序或所有附加到这些元素的内容都将丢失。 ng-show/ng-hide
does not remove the elements from DOM. ng-show/ng-hide
不会从DOM中删除元素。 It uses CSS styles to hide/show elements, also ng-if
creates a child scope while ng-show/ng-hide
does not 它使用CSS样式隐藏/显示元素,并且ng-if
会创建子范围,而ng-show/ng-hide
不会
Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.