<!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. Coding girl一个老程序员谈到的一个女程序员的故事

    因为有人说我给一个女程序员的建议不靠谱,我不服,因为我的工作经历中的一些女程序员都很不错,比那些男程序员都强,所以,我在新浪微博和twitter上征集女程序员的故事和想法,这两天来,我收到了好几封邮件 ...

  2. python编写Mysql自动备份脚本

    1､先写一个python脚本 vim /opt/mysql_dump.py #!/usr/bin/env python# -*- coding:utf-8 -*-import osimport tim ...

  3. 会话数据的管理——Session

    cookie的局限性: cookie只能存字符串类型.不能保存对象 只能存非中文 1个cookie的容量不超过4KB(如果要保存非字符串,超过4kb内容,只能使用session技术!!!) Sessi ...

  4. WebSocket与Tcp连接

    最近做了一个项目,客户端为WebSocket页面,服务器端为Tcp控制台 .将代码贴出来,供需要的参考. 1.服务器端代码 其中服务器的Session使用了第三方插件,为TCP连接. 2.客户端代码如 ...

  5. 【转】Android Camera（五）使用Camera功能 AREA的理解

    http://blog.csdn.net/think_soft/article/details/7998478 使用Camera功能 大多数的Camera功能都是使用Camera.Parameters ...

  6. Android 获取手机总内存和可用内存等信息

    在android开发中,有时候我们想获取手机的一些硬件信息,比如android手机的总内存和可用内存大小.这个该如何实现呢? 通过读取文件"/proc/meminfo"的信息能够获 ...

  7. Windows下Memcached在.Net程序中的实际运用(从Memcached客户端Enyim的库的编译到实际项目运用)

    1.一点基础概念 2.获取EnyimMemcached客户端的源代码并编译出动态库 3.Memcached的服务器安装(windows server) 4.在web项目中实战 一.基础概念 memca ...

  8. STDMETHOD_，STDMETHOD，__declspec(novtable)和__declspec(selectany)

    1.STDMETHOD_(ULONG, AddRef)() PURE; STDMETHOD_:定义一个返回指定类型的虚方法, STDMETHOD:定义一个返回HRESULT类型的虚方法, PURE : ...

  9. Oracle笔记-表的管理

    3.1创建和管理表在Oracle表中使用的emp,dept,sal都是系统内建好的表,那么在SQL语法中同样支持了表的创建语句,要想创建表,则应先了解下Oracle中最常用的几种数据类型3.1.1常用 ...

  10. ubuntu 12.04 编译安装 nginx

    下载源码包 nginx 地址:http://nginx.org/en/download.html 编译前先安装两个包: 直接编译安装会碰到缺少pcre等问题,这时候只要到再安装两个包就ok sudo ...