当我点击一个按钮重新加载其他模板angularjs

时间:2015-04-28 10:22:40

标签: angularjs

是否可以在单击按钮时重新加载其他模板而不退出angular.js中的当前模板

<div ng-repeat="caracter in crit.characters" class="col-md-4">
    <a class="thumbnail" id="mySelect" ng-click="clickSelection(caracter.id)">
        <h4 align="center">{{caracter.name}}</h4>
        <img ng-src="{{caracter.image_url}}"/>
    </a>
</div>

任何帮助都将不胜感激

1 个答案:

答案 0 :(得分:0)

假设您有3个模板

var templates =
            [ { name: 'template1.html', url: 'temp1.html'} ,
              { name: 'template2.html', url: 'temp2.html'},
              { name: 'template3.html', url: 'temp3.html'} 
            ];
你的html使用ng-template

中的

<script type="text/ng-template" id="temp1.html">
   <!--YOUR TEMPLATE 1-->
  </script>
<script type="text/ng-template" id="temp2.html">
   <!--YOUR TEMPLATE 2-->
  </script>

<div ng-include="template.url">

</div>
单击按钮调用

$scope.changeTemplates=function(x){
            if(x.toUpperCase()=='temp1'){
                $scope.template=templates[1];
            }else if(x.toUpperCase()=='temp2'){
                $scope.template=templates[2];
            }else if(x.toUpperCase()=='temp3'){
                $scope.template=templates[0];
            }
        }

这将从$scope.template

分配ng-template html