<!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. Datediff函数 助你实现不同进制时间之间的运算

    在VB开发环境中实现时间之间的加减运算有很多种方法,前不久自己无意中发现了Datediff函数,它能够比较简单.全面地实现我们比较常用的时间之间的运算,今由自己的研究,搞清了它的一些用法,拿来和大家分 ...

  2. java树状结构之二叉树

    参考:http://blog.csdn.net/zhangerqing/article/details/8822476 前面已经提到过树和二叉树的相关概念内容,下面主要来介绍下关于二叉树的创建,遍历, ...

  3. richTextBoxBulletClass

    设置和获取选中的样式为 1. 2. 3. #region 数字序列 1. 2. 3. 4. 5. ... private bool bOrder = false; public bool Select ...

  4. [D3] 13. Cleaner D3 code with selection.call()

    selection.call() method in D3 can aid in code organization and flexibility by eliminating the need t ...

  5. TCP keepalive

      2. TCP keepalive overview In order to understand what TCP keepalive (which we will just call keepa ...

  6. SOAP消息分析

    根据WebService学习笔记系列(二)中的介绍,使用tcpmon可以捕获到我们发出或者接收到的xml内容,接天我们就对这些xml内容做一个简单的分析.还记得在WebService学习笔记系列(四) ...

  7. Java基础知识强化之集合框架笔记62：Map集合之HashMap嵌套HashMap

    1. HashMap嵌套HashMap  传智播客          jc    基础班                      陈玉楼  20                      高跃   ...

  8. thinkphp 常见问题

    0．写在最前面的不断更新 (1)trace不起作用 A:必须要输出到模板,才会有trace信息 (2)提示“您浏览的页面暂时发生了错误!请稍后再试-” A:检查控制器(看看能进到控制器没有,设断点输出 ...

  9. 移动设备日期选择插件（基于JQUERY）

    上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...

  10. sql执行万条update语句优化

    几个月没有更新笔记了,最近遇到一个坑爹的问题,顺道记录一下.. 需求是这样的:一次性修改上万条数据库. 项目是用MVC+linq的. 本来想着用 直接where() 1 var latentCusto ...