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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
一些使用频率比较高的php函数
2008/10/03 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
Python中datetime模块参考手册
2017/01/13 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
外贸业务员工作职责
2014/01/06 职场文书
会议活动邀请函
2014/01/27 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
教育读书笔记
2015/07/02 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python