<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularDirective</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
　　<body ng-app="angularJS" >
　　　　<!-- <div class="self-direct">{{title}}<input type="text" ng-model='title'></div> -->

　　　　<!-- <input type="text" ng-model="color">
　　　　　　<self-direct color='{{color}}'></self-direct>
　　　　　　<self-direct m-color='{{color}}'></self-direct> -->

　　　　<!-- <input type="text" ng-model="color">
　　　　　　<self-direct color='color'></self-direct>如果采用双向绑定，指令中的属性值默认是变量，所以不用添加{{}}
　　　　　　<self-direct m-color='color'></self-direct> -->

　　　　<!-- <self-direct logo='logo()'></self-direct> -->

　　　　<!-- <self-direct ></self-direct> -->

　　　　<!-- <self-direct ></self-direct> -->

　　　　<self-direct title="JinDong" bgcolor="red" fontcolor="#fff"></self-direct>
　　　　<script type="text/javascript">

　　/*Angular.js自定义指令的格式和相关参数与其值：
　　let m=angular.module('angularJS',[]);
　　m.directive('selfDirect',[function(){//selfDirect表示自定义指令的名字，采用驼峰命名法，当restrict的值为E的时候:<self-direct></self-direct>
　　　　return {
　　　　　　restrict:'A/E/C',//A:Attrabute,E:Elements,C:class;restrict属性表示生成指令在页面中的表现形式,字母必须大写，不建议使用C，因为C的写法与CSS耦合性太强.
　　　　　　template:'<p>template选项表示指令在页面中显示的内容,template的值可以是字符串也可以是HTML的标签形式，也可以为函数，如：template:function(elle,attr){return '<span style="'color:'+attr['color']+'">'+ele.html()+'</span>'},view内容太多的时候不建议使用函数的形式</p>',
　　　　　　replace:true,//使用模板内容替换包含模板内容的父级标签
　　　　　　transclude:true,//其内容填充到ng-transclude指定的位置
　　　　　　templateUrl:'',//不可与template同时使用
　　　　　　scope:true,//默认为false，设置指令的作用域，当值为{}时，模板中的变量不会继承来自控制器中的属性值，
　　　　　　controller:['$scope',function($scope){$scope.data={...}}],//指令中的控制器
　　　　　　link:function(scope,elem,attr){},//用link完成对DOM的操作,scope:指令的作用域,elem:指令标签元素,attr:指令标签元素的属性数组,
　　　　};
　　}])*/

　　var m=angular.module('angularJS',[]);
　　m.directive('selfDirect', [function () {
　　　　return {
　　　　　　restrict: 'E',
　　　　　　//template:'<h1><span ng-transclude=""></span>This is a Angular.js direction of self definition</h1><div ng-transclude=""></div>',
　　　　　　//replace:true,
　　　　　　//transclude:true,
　　　　　　//templateUrl:'viewModel.html',
　　　　　　//scope:{},
　　　　　　//template:'{{title}}<input type="text" ng-model="title">',
　　　　　　//template:'<p style="color:{{color}}">suNing store</p><input ng-model="color">',
　　　　　　//scope:{color:'@mColor'},//控制器和指令隔离作用域@单项文本绑定，控制器可以影响指令中的数据，而指令不能影响控制器中的数据
　　　　　　//scope:{color:'=mColor'},//控制器和指令隔离作用域=双向文本绑定，控制器可以影响指令中的数据，指令也可以影响控制器中的data
　　　　　　//template:'<p>{{logo()}}</p>',
　　　　　　//scope:{logo:'&'},//用&符号调用父控制器中的方法
　　　　　　/*replace:true,
　　　　　　templateUrl:'viewModel.html',
　　　　　　controller:['$scope',function($scope){
　　　　　　　　$scope.data=[{
　　　　　　　　　　id:1,title:'puDong'
　　　　　　　　},{
　　　　　　　　　　id:2,title:'JinDong'
　　　　　　　　},{
　　　　　　　　　　id:3,title:'TianMao'
　　　　　　　　}];
　　　　　　}],*/
　　　　　　scope:{title:'@'},
　　　　　　link:function(scope,elem,attr){
　　　　　　　　$(elem).css({backgroundColor:attr['bgcolor'],color:attr['fontcolor']}).html(scope.title);
　　　　　　　　},
　　　　　　};
　　　　　　}]);
　　　　/*m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.title='SuNing store';
　　　　　　$scope.color='red';
　　　　　　$scope.logo=function(){
　　　　　　return 'TianMao store';
　　　　　};
　　　　}]);*/
</script>
</body>
</html>

Angular.js之自定义指令学习笔记的更多相关文章

  1. Angular.js之内置过滤器学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. angular.js创建自定义指令-demo3

    html: <!doctype html><html ng-app="myModule"> <head> <meta charset=&q ...

  3. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  4. 《JS高程》事件学习笔记

    事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...

  5. Vue.js：自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  6. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. Angular.js之服务与自定义服务学习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Angularjs之directive指令学习笔记（二）

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  9. angular这个大梗的学习笔记

    angular定义一个模块(module)及控制器(controller)的局部声明方法: var app=angular.module("Myapp",[]); myapp.co ...

随机推荐

  1. java 解析excel

    2014年2月25日 14:24:48 解析excel方法 //首先是jar包下载,请自行百度 //代码 package cn.wuwenfu.excel; import java.io.File; ...

  2. 如何备份、还原或迁移 WhatsApp 的信息和资料？

    WhatsApp 会在每天清晨 2 点钟自动创建本地备份文件并将备份文件存储在手机系统设置的文件夹中. Google 云端硬盘 您可以备份对话记录和媒体到 Google 云端硬盘以便日后更换手机时仍可 ...

  3. CreateForm(

    /// <summary> /// 打开新的子窗体 /// </summary> /// <param name="strName">窗体的类名 ...

  4. python查询mysql中文乱码问题

    python2.7 查询或者插入中文数据在mysql中的时候出现中文乱码 --- 可能情况: 1.mysql数据库各项没有设置编码,默认为'latin' 2.使用MySQL.connect的时候没有设 ...

  5. Linux环境下的GCC编译器与GDB调试工具介绍

    假如现在我们有如下代码需要编译运行和调试.文件名为:test.c #include <stdio.h> int main() { int day, month, year, sum, le ...

  6. 1.2.Core Data 的适用场合（Core Data 应用程序实践指南）

    如果应用程序要保存的设置数据太多,以致NSUserDefaults及“属性列表“(property list)这种简单的存储方案无法应付.不需要再"重新发明轮子"(reinvent ...

  7. Spring mvc系列一之 Spring mvc简单配置

    Spring mvc系列一之 Spring mvc简单配置-引用 Spring MVC做为SpringFrameWork的后续产品,Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块 ...

  8. CentOS 6.6下JDK1.7安装与配置（Linux）经典入门详解案例

    最近用的linux较多,在网站找了一些关于linux环境下jdk安装的教程,过程是有的但是好多细节都没有表现出来,所以我花了点时间总结了一下,希望对大家都有帮助... CentOS下JDK1.7安装与 ...

  9. C++ STL算法系列1---unique , unique_copy函数

     一.unique函数 类属性算法unique的作用是从输入序列中“删除”所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度没变,只是元素顺序 ...

  10. Ionic在线打包IOS平台应用

    参见:http://docs.ionic.io/services/profiles/#ios-app-certificate--provisioning-profile Ionic云编译,需要注册.地 ...