Angular指令1
Angular的指令
也就是directive,其实就是一WebComponent,以前端的眼光来看,好象很复杂,但是以后端的眼光来看,还是非常简单的。其实就是一个中等水平的类。
var myModule = angular.module(...); myModule.directive('namespaceDirectiveName', function factory(injectables) { var directiveDefinitionObject = { restrict: string, priority: number, template: string, templateUrl: string, replace: bool, transclude: bool, scope: bool or object, controller: function controllerConstructor($scope, $element, $attrs, $transclude), require: string, link: function postLink(scope, iElement, iAttrs) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } } }; return directiveDefinitionObject; });
属性作用
restrict 定义指令的限制,有四种,E element也就是元素,比如自定义一个my-menu的指令(或者叫组件),这玩意还可以组合,‘EA'这样子。
E element
A attribute
C classM comment
priority 设置元素跟随指令的优先级,不设是0,ng-repeat是1000,值越大优先级越高。
template 指定一段字符串模板
templateUrl 指定一个Url地址的模板
replace true替换模板内容到元素,false增加模板内容到元素。
transclude 反式包含,本人推测可能是trans include的合成词,老外的小花招,就是把指令里的内容,给替换到模板里面去,有点象是传参数,或者是Decorator模式
这块找到的资料给的例子都太复杂,这里本人给出一个最简单的例子,当然这个模式那可玩的花样相当复杂,还可以做更深层次的东西。``
这里是用户的内容,要反向包含到指令里去
var appModule = angular.module('app', []); appModule.directive('decorator', function () {
return {
restrict: 'E',
transclude: true,
template: '<div style="color:red">这里把用户的内容给包含进来了[<div ng-transclude></div>]</div>'
};
}); </script>
``
好象markdown插入代码显示有问题。
Angular指令1的更多相关文章
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...
- 【转】angular指令入坑
独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...
- angular 指令作用域 scope
转载自:https://segmentfault.com/a/1190000002773689 下面我们就来详细分析一下指令的作用域. 在这之前希望你对AngularJS的Directive有一定的了 ...
- angular指令大全
这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...
- 初学angular-简单的angular指令
实现一个简单的input清空内容,且清空对应ngModel 前台部分 <html ng-app="hpapp"> <head> <meta chars ...
- 学习angular 指令构造器时遇到的小问题
在学习angular时,使用模块来为应用添加自己的指令时,遇到了一个问题,演示的代码如下: <!DOCTYPE html> <html> <head> <me ...
随机推荐
- Oracle索引梳理系列(一)- Oracle访问数据的方法
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...
- js相对路径相关(比如:js中的路径依赖导入该js文件的路径)
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...
- 给锁住的行解锁(oracle)
1.查看数据库锁,诊断锁的来源及类型: select object_id,session_id,locked_mode from v$locked_object; 或者用以下命令: select b. ...
- date
更改时区 用系统备好的时区文件覆盖掉当前的配置文件,/etc/里装的是当前系统的配置文件 $sudo cp /usr/share/zoneinfo/Asia/Chongqing /etc/localt ...
- DNS 原理入门
导读 DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识.本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一 ...
- linux进程间通信-信号量(semaphore)
一 为什么要使用信号量 为了防止出现因多个程序同时访问一个共享资源而引发的一系列问题,我们需要一种方法,它可以通过生成并使用令牌来授权,在任一时刻只能有一个执行线程访问 代码的临界区域.临界区域是指执 ...
- CentOS7 安装MySQL
从官网下载源再用yum安装: # wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm # rpm -ivh m ...
- web报表工具FineReport常用函数的用法总结(报表函数)
说明:本次总结中,凡是以tableName或viewName作为参数因子的.函数在调用的时候均按照先从私有数据源中查找,然后再从公有数据源中查找的顺序. CLASS CLASS(object):返回o ...
- stanford coursera 机器学习编程作业 exercise 3(使用神经网络 识别手写的阿拉伯数字(0-9))
本作业使用神经网络(neural networks)识别手写的阿拉伯数字(0-9) 关于使用逻辑回归实现多分类问题:识别手写的阿拉伯数字(0-9),请参考:http://www.cnblogs.com ...
- POJ2230Watchcow[欧拉回路]
Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 7512 Accepted: 3290 Specia ...