<!DOCTYPE html>

<html ng-app='myApp'>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-controller="listCtrl">

    <input type="text"  ng-model="t" />

     <test title="{{t}}" >

        <span>我的angularjs</span>

    </test>

</div>

</body>

    <script>

    var myApp=angular.module('myApp',[]);

myApp.controller('listCtrl',function($scope){

   $scope.logchore="motorola";

});  

myApp.directive('test',function(){

    return {

        'restrict':'E',

        scope:{

            title:"@"

        },

        template:'<div >{{title}}+内部</div>'  

    }

});

</script>

</html>
<!DOCTYPE html>

<html ng-app='myApp'>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

 <div ng-controller="listCtrl">

    <input type="text"  ng-model="t" />

     <test title="t" >

        <p>{{title}}</p>

        <span>我的angularjs</span>

    </test>

</div>  

</body>

    <script>

    var myApp=angular.module('myApp',[]);

myApp.controller('listCtrl',function($scope){

   $scope.logchore="motorola";

});  

myApp.directive('test',function(){

    return {

        'restrict':'E',

        scope:{

            title:"="

        },

        template:'<div >{{title}}+内部</div>'  

    }

});  

</script>

</html>
<!DOCTYPE html>

<html ng-app='myApp'>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

 <div ng-controller="listCtrl">

      <test flavor="logchore()" ></test>

</div> 

</body>

    <script>

var myApp=angular.module('myApp',[]);

myApp.controller('listCtrl',function($scope){

   $scope.logchore=function(){

        alert('ok');

   };

});  

myApp.directive('test',function(){

    return {

        'restrict':'E',

        scope:{

            flavor:"&"

        },

        template:'<div ><button ng-click="flavor()"></button></div>'  

    }

});  

</script>

</html>
<!DOCTYPE html>

<html ng-app='myApp'>

<head>

  <meta charset="utf-8">

  <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

  @father:

  <input type="text" ng-model="data" />

  <me title="{{data}}">@</me>

  =father:

  <input type="text" ng-model="msg" />

  <you title="msg">=</you>

  <div ng-controller="listCtrl">

    <test flavor="logchore(str)"></test>

  </div>

</body>

<script>

  var app = angular.module("myApp", []);

  app.controller('listCtrl', function ($scope) {

    $scope.logchore = function (str) {

      alert(str);

    };

  });

  app.directive('me', function () {

    return {

      restrict: "E", //单向绑定，父元素可以改变子元素的model，子元素不能改变父元素的model

      scope: {

        title: '@'

      },

      template: "<div>{{title}}@:<input type='text' ng-model='title'/></div>"

    }

  });

  app.directive('you', function () {

    return {

      restrict: "E",

      scope: {

        title: "=" //双向绑定，父元素可以改变子元素的model，子元素可以改变父元素的model

      },

      template: "<div>{{title}}=:<input type='text' ng-model='title'/></div>"

    }

  })

  app.directive('test', function () {

    return {

      'restrict': 'E',

      scope: {

        flavor: "&"

      },

      //&是负责方法调用的，其中可以添加参数

      template: '<div><input ng-model="v"/><button ng-click="flavor({str:v})">点击</button></div>'

    }

  });

</script>

</html>
  • @ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。????
  • =和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已

AngularJS1.X指令的更多相关文章

  1. AngularJS1.X学习笔记4-内置事件指令及其他

    AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...

  2. AngularJS1.X学习笔记3-内置模板指令

    前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lan ...

  3. AngularJS1.X学习笔记10-自定义指令（下）

    继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...

  4. AngularJS1.X学习笔记9-自定义指令（中）

    今天好大的雨啊!上一节中,我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数,事实上我们的工厂函数也是可以返回一个对象,这个对象里面可以包含很多的属性,这使得我们可以创建更加强大的指令. 一 ...

  5. AngularJS1.X学习笔记8-自定义指令（上）

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

  6. angularJS1笔记-(17)-ng-bind-html指令

    angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的.举个例子: <!DOCTYPE html> <html lang="en&quo ...

  7. angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...

  8. angularJS1笔记-(10)-自定义指令(templateUrl属性)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. angularJS1笔记-(9)-自定义指令(restrict/template/replace)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. 【快学SpringBoot】快速上手好用方便的Spring Cache缓存框架

    前言 缓存,在开发中是非常常用的.在高并发系统中,如果没有缓存,纯靠数据库来扛,那么数据库压力会非常大,搞不好还会出现宕机的情况.本篇文章,将会带大家学习Spring Cache缓存框架. 原创声明 ...

  2. POJ 3987 Computer Virus on Planet Pandora (AC自动机优化）

    题意 问一个字符串中包含多少种模式串,该字符串的反向串包含也算. 思路 解析一下字符串,简单. 建自动机的时候,通过fail指针建立trie图.这样跑图的时候不再跳fail指针,相当于就是放弃了fai ...

  3. 批处理执行Testng

    @echo off set LIB=项目的jar路径 set CLASSPATH=%LIB%\jar\commons-beanutils-.jar;%LIB%\jar\testng.jar;%LIB% ...

  4. 关于转入软件工程专业后第二次java课上作业的某些体会

    今天是第二周的java课. 自从转入了软件工程专业后,在我没有学习c++的基础上,直接开始了学习java的过程.不得不说过程很艰辛.今天下午老师让编写一个随机产生作业的软件.而我的基础差到都不知道如何 ...

  5. 很重要的C++的位运算bitset

    本文摘录于柳神笔记: bitset ⽤来处理⼆进制位⾮常⽅便.头⽂件是 #include , bitset 可能在PAT.蓝桥OJ中不常 ⽤,但是在LeetCode OJ中经常⽤到-⽽且知道 bits ...

  6. Java面向对象编程 -1.4

    对象内存分析 对象实例化操作初步分析 Java之中类属于引用数据类型,引用数据类型最大的困难之处在于要进行内存的管理,同时在进行操作的时候也会有内存关系的变化. 所以本次针对于之前的程序的内存关系进行 ...

  7. 短信通道——阿里大鱼（java）

    综述            注:本文写于2017年6月22日升级之后. 使用阿里大鱼发送短信已经成为一种趋势,因为权威,而且价格也比较适中,被越来越多的公司所采用.在介绍阿里大鱼发送短信之前,首先得拥 ...

  8. MVC 拦截器

    https://www.cnblogs.com/blosaa/archive/2011/06/02/2067632.html

  9. 并发编程之Event事件

    Event事件 用来同步线程之间的状态. 举个例子: ​ 你把一个任务丢到了子线程中,这个任务将异步执行.如何获取到这个任务的执行状态 解决方法: 如果是拿到执行结果 我们可以采用异步回调, 在这里我 ...

  10. Java基础 -3.4

    反码(~) 在计算机中,负数以其正值的补码形式表达. 什么叫补码呢?这得从原码,反码说起. 原码:一个整数,按照绝对值大小转换成的二进制数,称为原码. 比如 00000000 00000000 000 ...