<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>AngularJS自定义指令与控制器数据交互</title>

<!--        <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>-->

        <script src="../../lib/angular/angular.js"></script>

        <script>

        angular.module('yyApp', [])

        .controller('yyHelloController', function($scope){

            $scope.data = {

                name: '张三'

            }

        })

        .controller('yyHelloController2', function($scope){

            $scope.data = {

                name: '李四'

            }

        })

        .directive('yyHello', function(){

            return{

                restrict: 'AE',

                replace: true,

                template: '<div name="{{data.name}}">你好,{{data.name}}</div>'

            };

        });

        </script>

    </head>

    <body ng-app='yyApp'>

        <yy-hello ng-controller='yyHelloController'></yy-hello>

        <div ng-controller='yyHelloController2'>

            <input type="text" ng-model='data.name'>

            <yy-hello></yy-hello>

        </div>

    </body>

</html>

AngularJS: 自定义指令与控制器数据交互的更多相关文章

  1. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  2. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  5. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  6. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  7. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  8. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  9. angularJs自定义指令（directive）实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

随机推荐

  1. Mysql Binlog 三种格式介绍及分析

    一．Mysql Binlog格式介绍       Mysql binlog日志有三种格式,分别为Statement,MiXED,以及ROW! 1.Statement:每一条会修改数据的sql都会记录在 ...

  2. Http(3)

    响应行 1.常见的状态: 200:表示请求处理完美返回 302:表示请求需要经进一步细化 404:表示客户访问的资源找不到. 500: 表示服务器的资源发送错误.(服务器内部错误) 2.常见的响应头 ...

  3. 20169210《Linux内核原理与分析》第八周作业

    第一部分:实验 首先还是网易云课堂的学习,这次的课程是进程的创建和进程的描述. linux进程的状态与操作系统原理中的描述的进程状态有些不同,例如就绪状态和运行状态都是TASK_RUNNING. Li ...

  4. There is an error while getting planid. No Free partitions available

    问题概述 Oracle Advanced Supply Chain Planning最初的设置职责的时候有点问题,不知是不是要打什么补丁或其它配置什么东东,, 这个提示,,但我查到的分区是还有可用分区 ...

  5. 【转】iOS应用崩溃日志揭秘

    这篇文章还可以在这里找到 英语 If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter ...

  6. 网络学习笔记----02--IGMP组播、ARP

    IGMP组播 :在路由器的接口上运行,周期性扫描本网段是否有绑定某个多播地址的计算机. ARP,全称Address Resolution Protoco,将广播中的IP地址解析成MAC地址 查看MAC ...

  7. [Eclipse]The type XXX cannot be resolved. It is indirectly referenced from required .class files

    在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...

  8. 第六篇：web之python框架之django

    python框架之django   python框架之django 本节内容 web框架 mvc和mtv模式 django流程和命令 django URL django views django te ...

  9. SOCKET，TCP/UDP,HTTP,FTP

    (一)TCP/UDP,SOCKET,HTTP,FTP简析 TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层: 网络层:IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议 传 ...

  10. delphi 截取指定符号之间的字符串-随机读取

    unit Unit1; interface uses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...