<!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. hadoop ssh无密码登陆

    VM DHCP蛋疼了,这次整个static... scp

  2. 在Excel里如何将多个工作簿合并到一个工作簿中

    在Excel里如何将多个工作簿合并到一个工作簿中 当你必须将多个工作簿合并到一个工作簿时,你遇到过麻烦吗?最让人心烦的就是需要合并的工作簿里有很多张工作表.有人能推荐方法解决这个问题吗? 利用VBA ...

  3. Velocity源码分析

    velocity模板渲染的步骤: 1) 首先初始化启动Velocity引擎,可以通过Velocity.init()或者新建VelocityEngine类,并调用其中的init()方法: 2) 创建一个 ...

  4. Codeforces Round #198 (Div. 2) D. Bubble Sort Graph （转化为最长非降子序列）

    D. Bubble Sort Graph time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. [D3] 4. d3.max

    how to use d3.max to normalize your dataset visually within the specific bounds of a variable domain ...

  6. mybatis0201 01复习

    mybatis是什么? mybatis是一个持久层框架,是apache下的开源项目,前身是itbatis,是一个不完全的ORM框架(因为mybatis提供输入和输出的映射,需要程序员自己写sql语句) ...

  7. bitset使用

    17.10使用序列1.2.3.5.8.13.21初始化一个bitset,将这些位置置位.对另一个bitset进行默认初始化,并编写一小段程序将其恰当的位置位. #include<iostream ...

  8. ATL 工程下添加右击菜单

    首先在dllmain.cpp中添加如下声明 HINSTANCE g_hInstance;  g_hInstance = hInstance; 源码如下: CPoint point;  ::GetCur ...

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

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

  10. HDU2054JAVA

    (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? A == B ? Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: ...