Populate div auf Click-Ereignisse

Question

Was ist der beste Weg, einen div füllen (oder ng-include) mit einer fertigen .html Vorlage anuglarjs verwenden, nicht ng-Ansicht mit und Routing?

für ex:

<div> 
    <ng-include src="" /> 
</div> 

<input type="button" ng-click="getTemplate()" value="Get template" /> 

$scope.getTemplate = function() { 
//Get and..populate template here 
} 

Answer 1

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 
    } 
} 

fiddle

DifferencezwischenngShow/ngHide & ngIf Verwendung - ng-if wird Elemente aus DOM entfernen. Das bedeutet, dass alle Ihre Handler oder irgendetwas anderes, das mit diesen Elementen verbunden ist, verloren gehen. ng-show/ng-hide entfernt die Elemente nicht aus DOM. Es verwendet Stile CSS zu verstecken/Show-Elemente, auch ng-if ein Kind Rahmen schafft, während ng-show/ng-hide nicht

Dank

Answer 2

Verwenden ng-if oder 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; 
} 

Und mit 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; 
} 

Der Unterschied zwischen den beiden ist, dass ng-if nicht die nicht bevölkern DOM, wenn die Bedingung ist falsch, während ng-show tut, aber markiert es als display: none.