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

      

      

  • 相关阅读:
    获取ip地址,
    手机div侧滑删除
    swiper左右选项卡滑动
    table-cell使用
    返回和刷新
    电脑浏览器计算高度和宽度
    css 空格
    时间js
    Nodejs仿Apache的部分功能
    Nodejs中的JavaScript
  • 原文地址:https://www.cnblogs.com/evaling/p/9283526.html
Copyright © 2011-2022 走看看