angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析)
定义tpl
<!-- 注意要有根标签 -->
<div class="list list-inset">
hello,
{{searchField}}
</div>
定义directive
angular.module('AppDirective', [])
//directive 必须使用驼峰命名 UI引用时使用 - 链接
.directive("appSearch", ['AppConstant', function (AppConstant) {
return {
/*
其他属性配置:
priority
在同一个DOM元素有多个directive定义时,可以指定执行顺序
terminal
在同一个DOM元素有多个directive定义时,该属性设为true,则最后执行
require
引入其他controller
require(前缀 + 'controllerName')
前缀:(可以不加)
? – 不要抛出异常。这使这个依赖变为一个可选项。
^ – 允许查找父元素的controller
*/
/*
restrict:
E – 元素名称: <app-search></app-search>
A – 属性名: <div app-search></div>
C – class名: <div class="app-search"></div>
M – 注释 : <!-- directive:app-search --> (使用M要把replace设为true)
可以同时设多个eg:
restrict : "AECM",
*/
restrict : "E",
//replace 如果设置为true将会替换当前元素,否则将作为子元素添加到当前元素中。
replace : true,
/*
scope
true:创建一个新的scope。如果在同一个元素中有多个directive都设为true 也只会创建一个scope。
{}:创建一个新的、独立的,拷贝父scope 的 scope(不会影响到父scope)
*/
scope: {
//UI设置这属性也要转换为 - 连接
searchField: '=searchFieldModel'
},
// template:'<div>Hello</div>'
templateUrl: 'directive/app-search.html',
/*
controller 属性:
$scope – 与当前元素结合的scope
$element – 当前的元素
$attrs – 当前元素的属性对象
$transclude
*/
controller: ['$scope', function($scope){
console.log($scope.searchField);
}],
// compile 和 link 不能同时使用
link: function(scope, el, att){
console.log(att.appSearch);
}
}
}]);
引入标签模块
angular.module('app', ['ionic', 'app.controllers','AppDirective'])
使用标签
<!--对应4种方法-->
<!-- directive:app-search -->
<app-search search-field-model="data.searchType"></app-search>
<div app-search ></div>
<div class="app-search"></div>
angularjs directive (自定义标签解析)的更多相关文章
- spring源码深度解析— IOC 之 自定义标签解析
概述 之前我们已经介绍了spring中默认标签的解析,解析来我们将分析自定义标签的解析,我们先回顾下自定义标签解析所使用的方法,如下图所示: 我们看到自定义标签的解析是通过BeanDefinition ...
- Spring自定义标签解析与实现
在Spring Bean注册解析(一)和Spring Bean注册解析(二)中我们讲到,Spring在解析xml文件中的标签的时候会区分当前的标签是四种基本标签(import.alias ...
- Spring IoC 自定义标签解析
前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...
- 从零开始学spring源码之xml解析(二):默认标签和自定义标签解析
默认标签: 上一篇说到spring的默认标签和自定义标签,发现这里面东西还蛮多的.决定还是拆开来写.今天就来好好聊聊这两块是怎么玩的,首先我们先看看默认标签: private void parseDe ...
- 04-Spring自定义标签解析
自定义标签的解析 这一篇主要说明自定义标签的解析流程,除了 bean.alias.import.beans之外的标签,都属于自定义标签的范围,自定义标签的解析需要命名空间配合, 获取对应的命名空间 根 ...
- AngularJS:directive自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...
- angularjs Directive自定义指令详解
作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...
- 基于Spring开发——自定义标签及其解析
1. XML Schema 1.1 最简单的标签 一个最简单的标签,形式如: <bf:head-routing key="1" value="1" to= ...
- Spring 系列教程之自定义标签的解析
Spring 系列教程之自定义标签的解析 在之前的章节中,我们提到了在 Spring 中存在默认标签与自定义标签两种,而在上一章节中我们分析了 Spring 中对默认标签的解析过程,相信大家一定已经有 ...
随机推荐
- NIO原理剖析与Netty初步----浅谈高性能服务器开发(一)
除特别注明外,本站所有文章均为原创,转载请注明地址 在博主不长的工作经历中,NIO用的并不多,由于使用原生的Java NIO编程的复杂性,大多数时候我们会选择Netty,mina等开源框架,但理解NI ...
- 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)
瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...
- md5加密解析
MD5加密算法解析 知识库连接: http://baike.baidu.com/view/7636.htm http://baike.baidu.com/subview/350813/7544439. ...
- webapi “ObjectContent`1”类型未能序列化内容类型“application/xml; charset=utf-8”的响应正文。
今天在来一发 webapi的一个知识点 相信用过webapi的对这个错误 已经看在眼里 痛在心里了把 我百度也搜了一下 看了一下 然后发现他们的解决办法 并没有什么软用. 然后想起来当时上学的 ...
- Basic Sort Algorithms
1. Bubble Sort public void bubbleSort(int[] arr) { boolean swapped = true; int j = 0; int tmp; while ...
- WPF自动更新程序
WPF AutoUpdater 描述: WPF+MVVM实现的自动更新程序 支持更新包文件验证(比较文件MD5码) 支持区分x86与x64程序的更新 支持更新程序的版本号 支持执行更新策略 截图: 使 ...
- CAP原理、一致性模型、BASE理论和ACID特性
CAP原理 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(Con ...
- python爬虫从入门到放弃(三)之 Urllib库的基本使用
官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...
- JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
- 10分钟学会JAVA注解(annotation)
(原) 先认识注解(Annotation) 定义类用class,定义接口用interface,定义注解用@interface 如public @interface AnnotationTest{} 所 ...