<!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. 一个免费的自动化跨平台测试JavaScript的工具——BrowserSwarm

    BrowserSwarm是一个免费工具,能够自动化跨平台测试JavaScript.

  2. android开发：@SuppressLint( NewApi )

    这个是android带的lint工具提示的,lint官方的说法是 Improving Your Code with lint,应该是帮助提升代码的 ,如果不想用的话,可以右键点工程,然后在androi ...

  3. POJ 1006 Biorhythms(中国剩余定理）

    题目地址:POJ 1006 学习了下中国剩余定理.參考的该博客.博客戳这里. 中国剩余定理的求解方法: 假如说x%c1=m1,x%c2=m2,x%c3=m3.那么能够设三个数R1,R2,R3.R1为c ...

  4. Android 疑难杂症之获取listView Item上面组件的值

    事实上思路就是又一次findById一次 获取当中组建的值.比方应用场景是 长按点击事件 获取目录名字 @Override public boolean onItemLongClick(Adapter ...

  5. kernel笔记:TCP参数

    http://blog.chinaunix.net/uid-27119491-id-3346430.html 本文将介绍网络连接建立的过程.收发包流程,以及其中应用层.tcp层.ip层.设备层和驱动层 ...

  6. JS家的排序算法

    由于浏览器的原生支持(无需安装任何插件),用JS来学习数据结构和算法也许比c更加便捷些.因为只需一个浏览器就能啪啪啪的调试了.比如下图我学习归并排序算法时,只看代码感觉怎么都理解不了,但是结合chro ...

  7. 常用JDBC连接字符串

    1.MySQL Class.forName( " org.gjt.mm.mysql.Driver " ); Connection conn = DriverManager.getC ...

  8. Android自定义DataTimePicker（日期选择器）

    实现的效果就是在同一个布局上显示日期选择和时间选择,时间不准确bug修复 1.自定义类DateTimePickDialogUtil.java public class DateTimePickDial ...

  9. Bash从路径中获取文件名

    #!/bin/bash basename /etc/hosts

  10. 第八篇：web之前端踩的一些坑

    前端踩的一些坑   前端踩的一些坑 本节内容 事件代理 清除标签的所有事件 bootstrap的模态框自定义方法 ajax在django里面实现post提交 ajax提交数据嵌套 1.事件代理 之前写 ...