ng-include
2024-08-30 08:54:11
ng-include可以作为标签或者属性来使用,作用是引入公用文件。
<div ng-include="'header.html'"></div>
注意里面的单引号不要漏了。
第二种使用方法,使用参数作为引用。
$scope.header = '/test/header.html';
<div ng-include="header"></div>
和angualer其他地方的参数使用不同,此处不需要添加双大括号{{}},直接使用就可以。
好了,下面是黑科技了。
以一个无限遍历目录树为例。
第一部分,页面内容部分
<div class="tree">
<i class="glyphicon glyphicon-folder-close"></i>
<a href="javascript:;" ng-right-click="editFolder($event, 0)">
<i></i>
<input type="hidden" value="0">
<span>{{sessionData.jobEnterprise.enterpriseName}}</span>
</a>
<!--<folder-tree current-folder="listData"></folder-tree>-->
<ul>
<li ng-repeat="node in listData" ng-include="'query.html'"> </li>
</ul>
</div>
<div class="right-content" ng-show="rightContent" ng-mouseleave="rightContent = false">
<ul>
<li class="right-content-item" ng-click="rightAdd()">新建</li>
<li class="right-content-item" ng-click="rightUpdata()">重命名</li>
<li class="right-content-item" ng-click="rightDelete()">删除</li>
</ul>
</div>
<div class="folder-text" ng-show="folderText"><input ng-model="folderValue" type="text"><button class="btn btnn-success" ng-click="rightAddOk()">确定</button><button class="btn btnn-info" ng-click="folderText = false"></button></div>
</div>
第二部分,模板部分
<script type="text/ng-template" id="query.html">
<a href="javascript:;" ng-right-click="editFolder($event, node)">
<i></i>
<input type="hidden" value="{{node.folderId}}">
<span>{{node.folderName}}</span>
</a>
<ul>
<li ng-repeat="node in node.childList" ng-include="'query.html'" ng-init="node = node.childList"> </li>
</ul>
</script>
此处当注意重点
type="text/ng-template"
这是让ng-include优先选择本页模板的关键部分。
剩下的就是一些操作的修改了。
最新文章
- iOS7 NavigationController 手势问题
- iOS中如何知道app版本已更新
- RMAN_学习笔记5_RMAN Catalog Script恢复目录脚本
- Javascript获取地址栏参数值
- 判断checkbox选中
- Cocos2d-x中自定义粒子系统
- vs 2013 编译zlib
- 通过CreateOleObject控制IE
- nginx proxy优化
- Win7下C:\Users\Cortana以账户名称命名的系统文件夹用户名的修改
- Java学习笔记三---unable to launch
- 软工+C(4): Alpha/Beta换人
- 在CentOS 7 上设置返回上一级目录的快捷键为 Backspace
- 简单尝试利用维控LeviStudioU的一栈缓冲区溢出漏洞
- 在UnrealEngine中用Custom节点实现描边效果
- 2018-8-16JWTtoken用户登录认证思路分析9502751
- TensorFlow和Keras完成JAFFE人脸表情识别
- 6-9 天平 uva839
- iOS - 开发中加载本地word/pdf文档说明
- 更新合并数组的es6方法