AngularJs ngInclude、ngTransclude

简介: 这两个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段。 格式:ng-include=“value”  class=”ng-include:value” value:string类型  模板id或者模板url ex:表达式,载入的时候执行。

这两个都是HTML DOM嵌入指令

ngInclude

读取,编译和插入外部的HTML片段。

格式:ng-include=“value”<ng-include src=”value” onload=“ex”autoscroll=“str”></ng-include>  class=”ng-include:value”

value:string类型  模板id或者模板url

ex:表达式,载入的时候执行。

autoscroll:页面载入后,当ngInclude需要调用$anchorScroll移动到指定位置的时候使用。

使用代码:

   <div ng-include="'temp'" onload="value='5'" autoscroll="" ></div>
   <script type="text/ng-template" id="temp">
        <input ng-model="text" />{{value}}
   </script>

这里需要注意的是 <script>标签的type是ng格式的 type="text/ng-template",还需要注意一个坑,需要把<script>标签写在ng-app的范围内才能让angular顺利的将该模板存入模板缓存中,如果是在ng-app范围外,将会是undefined。

ngTransclude

这个指令用于标记使用嵌入式的指令中包含的DOM插入点。

格式:ng-transclude

使用代码:

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
        <input ng-model="ctrl.words" />
        <my-div>{{ctrl.words}}</my-div>
  </div>
  (function () {
    angular.module("Demo", [])
    .directive("myDiv", myDiv)
    .controller("testCtrl", testCtrl);
    function myDiv(){
      return {
          restrict: 'E',
          transclude: true,
          template:"<div><p>ngTransclude:</p><p ng-transclude></p><p>End</p></div>"
      }
    };
    function testCtrl() {
        this.words = "Hello World";
    };
  }());

在指令中嵌入指令外的DOM元素,值的注意的是,就算这个指令创建了自己的子scope,这个DOM元素所在的scope也不是这个指令的scope,而是指令所在的scope。

相关文章
|
消息中间件 NoSQL 关系型数据库
redis事务和异步连接
redis事务和异步连接
246 1
|
安全 API 开发者
转账到支付宝账户接口:一次开发,提升打款效率
转账到支付宝账户接口:一次开发,提升打款效率
527 0
|
机器学习/深度学习 人工智能 TensorFlow
深度学习中的图像识别技术:从理论到实践
【9月更文挑战第17天】在深度学习的浪潮中,图像识别技术以其惊人的准确率和广泛的应用前景,成为了科技领域的一颗耀眼之星。本文将通过浅显易懂的语言,带你走进图像识别的世界,探索其背后的原理,并通过实际代码示例,展示如何运用深度学习框架实现简单的图像分类任务。无论你是初学者还是有一定经验的开发者,都能从中获益。
|
安全 API 开发工具
开发api数据接口的工作步骤
本文概述了使用Python的Flask框架开发简单API数据接口的基本步骤。首先,需明确API提供的数据及其来源,确保数据的真实可靠。其次,选择合适的开发工具和技术栈,如Python结合Flask,并安装所需环境。编写代码时,应导入必要模块、创建应用实例、定义数据、设计路由及处理函数,并考虑错误处理和日志记录。测试阶段,在本地启动服务器并使用工具验证功能和性能。最后,选择合适平台部署API,并确保其稳定性和安全性。在整个过程中,需注重数据安全、代码质量及系统性能优化。
|
Linux
linux两台服务器时间同步
linux两台服务器时间同步
924 0
|
编解码 开发工具 数据安全/隐私保护
如何快速实现Windows平台屏幕摄像头采集并推送RTMP|轻量级RTSP服务能力?
一个好的推送模块,除了实现高效率的编码传输外,还要有好的音视频采集机制和灵活的架构支持,便于后期功能扩展,比如实时快照、预览、实时录像等。除此之外,还要有好的交互机制(比如envent callback)、低延迟和长期运行稳定的性能。
381 0
|
机器学习/深度学习 人工智能 自然语言处理
AI技术在文本生成中的应用及代码示例
【8月更文挑战第31天】 本文将介绍AI技术在文本生成领域的应用,包括自然语言处理、机器学习和深度学习等。通过一个简单的Python代码示例,展示如何使用AI技术生成文本。最后,探讨AI技术在文本生成领域的未来发展趋势。
|
存储 前端开发 JavaScript
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。
|
存储 Java 数据库连接
Spring Boot 配置主从数据库实现读写分离
Spring Boot 配置主从数据库实现读写分离
1510 0
|
Python
从bag包中提取图片和点云数据为pcd格式点云文件
从bag包中提取图片和点云数据为pcd格式点云文件
930 0