<!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和Ajax

    原博(实在太啰嗦了):https://netbeans.org/kb/docs/web/ajax-quickstart_zh_CN.html 1.Ajax的基本原理 Ajax 代表异步 JavaScr ...

  2. Mysql和Oracle的一些语法区别

    作为一个有追求的程序猿,当然要不断的学习,巴拉巴拉巴拉...好了,贴一个网址给大家,哈哈 MySQL与Oracle 差异比较:http://www.cnblogs.com/HondaHsu/p/364 ...

  3. ios framework 开发

    ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程

  4. 【Android】Activity

    一.Android四大组件 Activity.Service.BroadCastReceiver.ContentProvider. 二.Activity的继承关系 三.建立.配置和使用Activity ...

  5. Win7 x64 Eclipse无法识别手机 / adb interface有黄色感叹号,无法识别

    今天公司停电,因此把安卓项目带回宿舍做.宿舍的笔记本,装的是Win7 x64,手机连上电脑后,windows可以识别,但Eclipse的DDMS中却无法识别,什么都没有: 然后打开设备管理器查看,发现 ...

  6. 如何选择面向移动设备的html5开发框架

    很久以前整理了篇将手机网站做成手机应用的JS框架.时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的. 1.jQuery Mobile jQuery Mobile ...

  7. Java div 使用说明

    1. 置于底部 position:absolute; bottom:0;

  8. Java高级特性之反射

    老规矩我们还是先提出几个问题,一门技术必然要能解决一定的问题,才有去学习掌握它的价值 一. 什么是反射? 二.反射能做什么? 一. 什么是反射? 用在Java身上指的是我们可以于运行时加载.探知.使用 ...

  9. Nginx之RTMP

    1. RTMP协议介绍 RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频.视频和数据传输开发的私有 ...

  10. Eclipse中TODO的分类,以及自动去除

    Window-Preference-Java-Compiler-Task Tags; 这里面进行TaskTag标签的定义,默认支持FIXME.TODO.XXX三种:优先级高的在taskview中 会显 ...