zoukankan      html  css  js  c++  java
  • angularJS指令动态加载template

    angularJS提供了自定义指令的功能,指令可以定义自己的模板控制器,这个就类似于现在框架的组件,一个指令一般对应一个模板,

       templateUrl: 'templates/exportTmp.html', 
    template:'<div>............</div>'

    但有时候我们想动态改变加载的指令模板

    1)合理使用ng-include

    html:

    <div ng-switch="myVar">
      <div ng-switch-when="action">
         <div ng-include="getTemplate('action')"></div>  
      </div>
      <div ng-switch-when="view">
         <div ng-include="getTemplate('view')"></div>
      </div>
      <div ng-switch-when="edit">
         <div ng-include="getTemplate('edit')"></div>
      </div>
      <div ng-switch-default>
          <div ng-include="getTemplate('action')"></div>
      </div>
    </div>
    

    js:

       link: function ($scope, el, attr) {
               $scope.getTemplate = function(flag) {
                       if(flag=='action') {
                          template='./src/html/action.html';
                       }
                        .....
                         return template;
                         }  
                   }

      

      

  • 相关阅读:
    Oracle配置手册
    Vim配置手册
    高斯消元
    dp专场的蒟蒻题解
    mac 软件意外退出
    spring security整体流程
    服务启动shell脚本
    nohup 启动命令
    linux service脚本
    docker 安装prometheus和grafna
  • 原文地址:https://www.cnblogs.com/evaling/p/9283526.html
Copyright © 2011-2022 走看看