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 相关文章推荐
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
js实现AI五子棋人机大战
May 28 Javascript
iview实现图片上传功能
Jun 29 Javascript
请求时token过期自动刷新token操作
Sep 11 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中cookies使用指南
2007/03/16 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
linux下php上传文件注意事项
2016/06/11 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JS跨域问题详解
2014/11/25 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
微信小程序checkbox组件使用详解
2018/01/31 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
生产副总岗位职责
2013/11/28 职场文书
同学聚会主持词
2014/03/18 职场文书
求职意向书范文
2014/04/01 职场文书
单位工作证明格式模板
2014/10/04 职场文书
办理护照工作证明
2014/10/10 职场文书
交通处罚决定书
2015/06/24 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL