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 (自定义标签解析)的更多相关文章

  1. spring源码深度解析— IOC 之 自定义标签解析

    概述 之前我们已经介绍了spring中默认标签的解析,解析来我们将分析自定义标签的解析,我们先回顾下自定义标签解析所使用的方法,如下图所示: 我们看到自定义标签的解析是通过BeanDefinition ...

  2. Spring自定义标签解析与实现

           在Spring Bean注册解析(一)和Spring Bean注册解析(二)中我们讲到,Spring在解析xml文件中的标签的时候会区分当前的标签是四种基本标签(import.alias ...

  3. Spring IoC 自定义标签解析

    前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...

  4. 从零开始学spring源码之xml解析(二):默认标签和自定义标签解析

    默认标签: 上一篇说到spring的默认标签和自定义标签,发现这里面东西还蛮多的.决定还是拆开来写.今天就来好好聊聊这两块是怎么玩的,首先我们先看看默认标签: private void parseDe ...

  5. 04-Spring自定义标签解析

    自定义标签的解析 这一篇主要说明自定义标签的解析流程,除了 bean.alias.import.beans之外的标签,都属于自定义标签的范围,自定义标签的解析需要命名空间配合, 获取对应的命名空间 根 ...

  6. AngularJS:directive自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...

  7. angularjs Directive自定义指令详解

    作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...

  8. 基于Spring开发——自定义标签及其解析

    1. XML Schema 1.1 最简单的标签 一个最简单的标签,形式如: <bf:head-routing key="1" value="1" to= ...

  9. Spring 系列教程之自定义标签的解析

    Spring 系列教程之自定义标签的解析 在之前的章节中,我们提到了在 Spring 中存在默认标签与自定义标签两种,而在上一章节中我们分析了 Spring 中对默认标签的解析过程,相信大家一定已经有 ...

随机推荐

  1. NIO原理剖析与Netty初步----浅谈高性能服务器开发(一)

    除特别注明外,本站所有文章均为原创,转载请注明地址 在博主不长的工作经历中,NIO用的并不多,由于使用原生的Java NIO编程的复杂性,大多数时候我们会选择Netty,mina等开源框架,但理解NI ...

  2. 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)

    瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...

  3. md5加密解析

    MD5加密算法解析 知识库连接: http://baike.baidu.com/view/7636.htm http://baike.baidu.com/subview/350813/7544439. ...

  4. webapi “ObjectContent`1”类型未能序列化内容类型“application/xml; charset=utf-8”的响应正文。

    今天在来一发  webapi的一个知识点 相信用过webapi的对这个错误 已经看在眼里 痛在心里了把 我百度也搜了一下  看了一下   然后发现他们的解决办法 并没有什么软用. 然后想起来当时上学的 ...

  5. Basic Sort Algorithms

    1. Bubble Sort public void bubbleSort(int[] arr) { boolean swapped = true; int j = 0; int tmp; while ...

  6. WPF自动更新程序

    WPF AutoUpdater 描述: WPF+MVVM实现的自动更新程序 支持更新包文件验证(比较文件MD5码) 支持区分x86与x64程序的更新 支持更新程序的版本号 支持执行更新策略 截图: 使 ...

  7. CAP原理、一致性模型、BASE理论和ACID特性

    CAP原理 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(Con ...

  8. python爬虫从入门到放弃(三)之 Urllib库的基本使用

    官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...

  9. JS实现鼠标移上去图片停止滚动移开恢复滚动效果

    这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...

  10. 10分钟学会JAVA注解(annotation)

    (原) 先认识注解(Annotation) 定义类用class,定义接口用interface,定义注解用@interface 如public @interface AnnotationTest{} 所 ...