AngularJS实现自定义指令与控制器数据交互的方法示例


Posted in Javascript onJune 19, 2017

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法。分享给大家供大家参考,具体如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
jQuery自定义多选下拉框效果
Jun 19 #jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 #Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 #Javascript
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 #Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
javascript 模拟点击广告
2010/01/02 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Numpy数组转置的两种实现方法
2018/04/17 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python 三元运算符使用解析
2019/09/16 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
毕业设计计划书
2014/01/09 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
政风行风评议整改方案
2014/09/15 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
初中差生评语
2014/12/29 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2019教师的学习计划
2019/06/25 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python